+
+## Como executar este projeto
+
+Instale as dependências:
+
+`npm install`
+
+Rode a aplicação no modo de desenvolvimento:
+
+`npm start`
+
+Abra [http://localhost:5000](http://localhost:5000) para vê-lo no navegador.
+
+## Aprenda mais sobre o Nullstack
+
+[Leia a documentação](https://nullstack.app/pt-br/comecando)
+
+Perhaps you want to learn about how to make a 404 page with Nullstack?
-If you are looking for something else, you should read the documentation.
-Community Components
A curated list of Nullstack components made by the community.
If you want to add a component to this list open an issue on github.
Integrations
General Inputs
Brazilian Inputs
🤘 Nullstack é BR porr@!
Community Components
A curated list of Nullstack components made by the community.
If you want to add a component to this list open an issue on github.
Integrations
General Inputs
Brazilian Inputs
🤘 Nullstack é BR porr@!
Context Data
-
-
- Type:
object
- - Origin: Component Context -
- Availability: client -
- readonly in client context -
It gives you information about the element dataset.
-You can use this key to avoid polluting your DOM with invalid attributes.
---💡 This helps Nullstack set attributes without wasting time validating them.
-
Any data-* attributes will receive a respective camelized key on the data object.
You can assign data attributes both via data-* and a data key that accepts an object with camelized keys.
The kebab version is also available in the context.
-import Nullstack from 'nullstack';
-
-class ContextData extends Nullstack {
-
- count = 1;
-
- calculate({data}) {
- this.count = this.count * data.multiply + data.sum;
- }
-
- renderInner(context) {
- const {data} = context;
- return (
- <div data={data}>
- {data.frameworkName}
- is same as
- {context['data-framework-name']}
- </div>
- )
- }
-
- render({data}) {
- return (
- <div>
- <button onclick={this.calculate} data-multiply={3} data={{sum: 2}}>
- Calculate
- </button>
- <Inner data-framework-name="Nullstack" />
- </div>
- )
- }
-
-}
-
-export default ContextData;
---💡 Camelized keys from the
-dataobject will result in kebab attributes in the DOM.
Next step
⚔ Learn about the context environment.
Context Data
-
-
- Type:
object
- - Origin: Component Context -
- Availability: client -
- readonly in client context -
It gives you information about the element dataset.
-You can use this key to avoid polluting your DOM with invalid attributes.
---💡 This helps Nullstack set attributes without wasting time validating them.
-
Any data-* attributes will receive a respective camelized key on the data object.
You can assign data attributes both via data-* and a data key that accepts an object with camelized keys.
The kebab version is also available in the context.
-import Nullstack from 'nullstack';
-
-class ContextData extends Nullstack {
-
- count = 1;
-
- calculate({data}) {
- this.count = this.count * data.multiply + data.sum;
- }
-
- renderInner(context) {
- const {data} = context;
- return (
- <div data={data}>
- {data.frameworkName}
- is same as
- {context['data-framework-name']}
- </div>
- )
- }
-
- render({data}) {
- return (
- <div>
- <button onclick={this.calculate} data-multiply={3} data={{sum: 2}}>
- Calculate
- </button>
- <Inner data-framework-name="Nullstack" />
- </div>
- )
- }
-
-}
-
-export default ContextData;
---💡 Camelized keys from the
-dataobject will result in kebab attributes in the DOM.
Next step
⚔ Learn about the context environment.
- \n
- Type:
object\n - Origin: Component Context \n
- Availability: client \n
- readonly in client context \n
It gives you information about the element dataset.
\nYou can use this key to avoid polluting your DOM with invalid attributes.
\n\n\n💡 This helps Nullstack set attributes without wasting time validating them.
\n
Any data-* attributes will receive a respective camelized key on the data object.
You can assign data attributes both via data-* and a data key that accepts an object with camelized keys.
The kebab version is also available in the context.
\nimport Nullstack from 'nullstack';\n\nclass ContextData extends Nullstack {\n\n count = 1;\n\n calculate({data}) {\n this.count = this.count * data.multiply + data.sum;\n }\n\n renderInner(context) {\n const {data} = context;\n return (\n <div data={data}>\n {data.frameworkName}\n is same as\n {context['data-framework-name']}\n </div>\n )\n }\n \n render({data}) {\n return (\n <div> \n <button onclick={this.calculate} data-multiply={3} data={{sum: 2}}>\n Calculate\n </button>\n <Inner data-framework-name=\"Nullstack\" />\n </div>\n )\n }\n\n}\n\nexport default ContextData;\n\n\n💡 Camelized keys from the
\ndataobject will result in kebab attributes in the DOM.
Next step
⚔ Learn about the context environment.
Context Environment
-
-
- Type:
object
- - Origin: Nullstack Context -
- Availability: server/client -
- readonly in server/client context -
It gives you information about the current environment.
-The following keys are available in the object:
--
-
- client:
boolean
- - server:
boolean
- - development:
boolean
- - production:
boolean
- - static:
boolean
- - key:
string
-
import Nullstack from 'nullstack';
-
-class Page extends Nullstack {
-
- render({environment}) {
- return (
- <div>
- {environment.client && <p>I'm in the client</p>}
- {environment.server && <p>I'm in the server</p>}
- {environment.development && <p>I'm in development mode</p>}
- {environment.production && <p>I'm in production mode</p>}
- {environment.static && <p>I'm in a static site</p>}
- <p> My key is {environment.key}</p>
- </div>
- )
- }
-
-}
-
-export default Page;
-The environment key is an md5 hash of the current environment folder outputs. The key is appended to assets and static API path to assist cache control.
-Next step
⚔ Learn about the context page.
Context Environment
-
-
- Type:
object
- - Origin: Nullstack Context -
- Availability: server/client -
- readonly in server/client context -
It gives you information about the current environment.
-The following keys are available in the object:
--
-
- client:
boolean
- - server:
boolean
- - development:
boolean
- - production:
boolean
- - static:
boolean
- - key:
string
-
import Nullstack from 'nullstack';
-
-class Page extends Nullstack {
-
- render({environment}) {
- return (
- <div>
- {environment.client && <p>I'm in the client</p>}
- {environment.server && <p>I'm in the server</p>}
- {environment.development && <p>I'm in development mode</p>}
- {environment.production && <p>I'm in production mode</p>}
- {environment.static && <p>I'm in a static site</p>}
- <p> My key is {environment.key}</p>
- </div>
- )
- }
-
-}
-
-export default Page;
-The environment key is an md5 hash of the current environment folder outputs. The key is appended to assets and static API path to assist cache control.
-Next step
⚔ Learn about the context page.
- \n
- Type:
object\n - Origin: Nullstack Context \n
- Availability: server/client \n
- readonly in server/client context \n
It gives you information about the current environment.
\nThe following keys are available in the object:
\n- \n
- client:
boolean\n - server:
boolean\n - development:
boolean\n - production:
boolean\n - static:
boolean\n - key:
string\n
import Nullstack from 'nullstack';\n\nclass Page extends Nullstack {\n \n render({environment}) {\n return (\n <div> \n {environment.client && <p>I'm in the client</p>}\n {environment.server && <p>I'm in the server</p>}\n {environment.development && <p>I'm in development mode</p>}\n {environment.production && <p>I'm in production mode</p>}\n {environment.static && <p>I'm in a static site</p>}\n <p> My key is {environment.key}</p>\n </div>\n )\n }\n\n}\n\nexport default Page;\nThe environment key is an md5 hash of the current environment folder outputs. The key is appended to assets and static API path to assist cache control.
\nNext step
⚔ Learn about the context page.
Context Page
-
-
- Type:
object
- - Origin: Nullstack Context -
- Availability: server/client -
- readwrite in server/client context -
It gives you information about the document head metatags.
page keys will be used to generate metatags during server-side rendering and must be assigned before initiate while this resolved.
The following keys are available in the object:
--
-
- title:
string
- - image:
string(absolute or relative URL)
- - description:
string
- - canonical:
string(absolute or relative URL)
- - locale:
string
- - robots:
string
- - schema:
object
- - changes:
string
- - priority:
number
- - status:
number
-
When the title key is assigned on the client-side, the document title will be updated.
Nullstack uses the changes and priority keys to generate the sitemap.xml.
The sitemap is generated automatically only when using static site generation and must be manually generated in server-side rendered applications.
-The changes key represents the changefreq key in the sitemap.xml and if assigned must be one of the following values:
-
-
- always -
- hourly -
- daily -
- weekly -
- monthly -
- yearly -
- never -
The priority key is a number between 0.0 and 1.0 that represents the priority key in the sitemap.xml.
Nullstack does not set a default priority, however, sitemaps assume a 0.5 priority when not explicitly set.
Besides title and locale all other keys have sensible defaults generated based on the application scope.
import Nullstack from 'nullstack';
-
-class Page extends Nullstack {
-
- prepare({project, page}) {
- page.title = `${project.name} - Page Title`;
- page.image = '/image.jpg';
- page.description = 'Page meta description';
- page.canonical = 'http://absolute.url/canonical-link';
- page.locale = 'pt-BR';
- page.robots = 'index, follow';
- page.schema = {};
- page.changes = 'weekly';
- page.priority = 1;
- }
-
- render({page}) {
- return (
- <div>
- <h1>{page.title}</h1>
- <p>{page.description}</p>
- </div>
- )
- }
-
-}
-
-export default Page;
-Custom Events
Updating page.title will raise a custom event.
import Nullstack from 'nullstack';
-
-class Analytics extends Nullstack {
-
- hydrate({page}) {
- window.addEventListener(page.event, () => {
- console.log(`New title: ${page.title}`);
- });
- }
-
-}
-
-export default Analytics;
---🔥
-page.eventis only available in client functions/lifecycles.
Error pages
If during the server-side render process the page.status has any value besides 200, your application will receive another render pass that gives you the chance to adjust the interface according to the status.
The status key will be raised with the HTTP response.
The page status will be modified to 500 and receive another render pass if the page raise an exception while rendering.
The status of server functions responses will be set to the page.status.
import Nullstack from 'nullstack';
-import ErrorPage from './ErrorPage';
-import HomePage from './HomePage';
-
-class Application extends Nullstack {
-
- // ...
-
- render({page}) {
- return (
- <main>
- {page.status !== 200 && <ErrorPage route="*" />}
- <HomePage route="/" />
- </main>
- )
- }
-
-}
-
-export default Application;
---🔥 Assigning to the
-statuskey during the single-page application mode will have no effect.
Next step
⚔ Learn about the context project.
Context Page
-
-
- Type:
object
- - Origin: Nullstack Context -
- Availability: server/client -
- readwrite in server/client context -
It gives you information about the document head metatags.
page keys will be used to generate metatags during server-side rendering and must be assigned before initiate while this resolved.
The following keys are available in the object:
--
-
- title:
string
- - image:
string(absolute or relative URL)
- - description:
string
- - canonical:
string(absolute or relative URL)
- - locale:
string
- - robots:
string
- - schema:
object
- - changes:
string
- - priority:
number
- - status:
number
-
When the title key is assigned on the client-side, the document title will be updated.
Nullstack uses the changes and priority keys to generate the sitemap.xml.
The sitemap is generated automatically only when using static site generation and must be manually generated in server-side rendered applications.
-The changes key represents the changefreq key in the sitemap.xml and if assigned must be one of the following values:
-
-
- always -
- hourly -
- daily -
- weekly -
- monthly -
- yearly -
- never -
The priority key is a number between 0.0 and 1.0 that represents the priority key in the sitemap.xml.
Nullstack does not set a default priority, however, sitemaps assume a 0.5 priority when not explicitly set.
Besides title and locale all other keys have sensible defaults generated based on the application scope.
import Nullstack from 'nullstack';
-
-class Page extends Nullstack {
-
- prepare({project, page}) {
- page.title = `${project.name} - Page Title`;
- page.image = '/image.jpg';
- page.description = 'Page meta description';
- page.canonical = 'http://absolute.url/canonical-link';
- page.locale = 'pt-BR';
- page.robots = 'index, follow';
- page.schema = {};
- page.changes = 'weekly';
- page.priority = 1;
- }
-
- render({page}) {
- return (
- <div>
- <h1>{page.title}</h1>
- <p>{page.description}</p>
- </div>
- )
- }
-
-}
-
-export default Page;
-Custom Events
Updating page.title will raise a custom event.
import Nullstack from 'nullstack';
-
-class Analytics extends Nullstack {
-
- hydrate({page}) {
- window.addEventListener(page.event, () => {
- console.log(`New title: ${page.title}`);
- });
- }
-
-}
-
-export default Analytics;
---🔥
-page.eventis only available in client functions/lifecycles.
Error pages
If during the server-side render process the page.status has any value besides 200, your application will receive another render pass that gives you the chance to adjust the interface according to the status.
The status key will be raised with the HTTP response.
The page status will be modified to 500 and receive another render pass if the page raise an exception while rendering.
The status of server functions responses will be set to the page.status.
import Nullstack from 'nullstack';
-import ErrorPage from './ErrorPage';
-import HomePage from './HomePage';
-
-class Application extends Nullstack {
-
- // ...
-
- render({page}) {
- return (
- <main>
- {page.status !== 200 && <ErrorPage route="*" />}
- <HomePage route="/" />
- </main>
- )
- }
-
-}
-
-export default Application;
---🔥 Assigning to the
-statuskey during the single-page application mode will have no effect.
Next step
⚔ Learn about the context project.
- \n
- Type:
object\n - Origin: Nullstack Context \n
- Availability: server/client \n
- readwrite in server/client context \n
It gives you information about the document head metatags.
page keys will be used to generate metatags during server-side rendering and must be assigned before initiate while this resolved.
The following keys are available in the object:
\n- \n
- title:
string\n - image:
string(absolute or relative URL) \n - description:
string\n - canonical:
string(absolute or relative URL) \n - locale:
string\n - robots:
string\n - schema:
object\n - changes:
string\n - priority:
number\n - status:
number\n
When the title key is assigned on the client-side, the document title will be updated.
Nullstack uses the changes and priority keys to generate the sitemap.xml.
The sitemap is generated automatically only when using static site generation and must be manually generated in server-side rendered applications.
\nThe changes key represents the changefreq key in the sitemap.xml and if assigned must be one of the following values:
- \n
- always \n
- hourly \n
- daily \n
- weekly \n
- monthly \n
- yearly \n
- never \n
The priority key is a number between 0.0 and 1.0 that represents the priority key in the sitemap.xml.
Nullstack does not set a default priority, however, sitemaps assume a 0.5 priority when not explicitly set.
Besides title and locale all other keys have sensible defaults generated based on the application scope.
import Nullstack from 'nullstack';\n\nclass Page extends Nullstack {\n\n prepare({project, page}) {\n page.title = `${project.name} - Page Title`;\n page.image = '/image.jpg';\n page.description = 'Page meta description';\n page.canonical = 'http://absolute.url/canonical-link';\n page.locale = 'pt-BR';\n page.robots = 'index, follow';\n page.schema = {};\n page.changes = 'weekly';\n page.priority = 1;\n }\n\n render({page}) {\n return (\n <div>\n <h1>{page.title}</h1>\n <p>{page.description}</p>\n </div>\n )\n }\n\n}\n\nexport default Page;\nCustom Events
Updating page.title will raise a custom event.
import Nullstack from 'nullstack';\n\nclass Analytics extends Nullstack {\n\n hydrate({page}) {\n window.addEventListener(page.event, () => {\n console.log(`New title: ${page.title}`);\n });\n }\n\n}\n\nexport default Analytics;\n\n\n🔥
\npage.eventis only available in client functions/lifecycles.
Error pages
If during the server-side render process the page.status has any value besides 200, your application will receive another render pass that gives you the chance to adjust the interface according to the status.
The status key will be raised with the HTTP response.
The page status will be modified to 500 and receive another render pass if the page raise an exception while rendering.
The status of server functions responses will be set to the page.status.
import Nullstack from 'nullstack';\nimport ErrorPage from './ErrorPage';\nimport HomePage from './HomePage';\n\nclass Application extends Nullstack {\n\n // ...\n\n render({page}) {\n return (\n <main>\n {page.status !== 200 && <ErrorPage route=\"*\" />}\n <HomePage route=\"/\" />\n </main>\n )\n }\n\n}\n\nexport default Application;\n\n\n🔥 Assigning to the
\nstatuskey during the single-page application mode will have no effect.
Next step
⚔ Learn about the context project.
Context Project
-
-
- Type:
object
- - Origin: Nullstack Context -
- Availability: server/client -
- readwrite in the server context -
- readonly in the client context -
It gives you information about the app manifest and some metatags.
-project keys will be used to generate metatags during server-side rendering and must be assigned before initiate is resolved.
project keys will be used to generate the app manifest and should be set during the application startup.
The disallow key will be used to generate the robots.txt and should be set during the application startup.
project keys are frozen after the application startup.
The following keys are available in the object:
--
-
- domain:
string
- - name:
string
- - shortName:
string
- - color:
string
- - backgroundColor:
string
- - type:
string
- - display:
string
- - orientation:
string
- - scope:
string
- - root:
string
- - icons:
object
- - favicon:
string(relative or absolute url)
- - disallow:
string array(relative paths)
- - sitemap:
booleanorstring(relative or absolute url)
- - cdn:
string(absolute url)
- - protocol:
string(http or https)
-
Besides domain, name and color all other keys have sensible defaults generated based on the application scope.
If you do not declare the icons key, Nullstack will scan any icons with the name following the pattern "icon-[WIDTH]x[HEIGHT].png" in your public folder.
If the sitemap key is set to true your robots.txt file will point the sitemap to https://${project.domain}/sitemap.xml.
The cdn key will prefix your asset bundles and will be available in the context so you can manually prefix other assets.
The protocol key is "http" in development mode and "https" in production mode by default.
import Nullstack from 'nullstack';
-
-class Application extends Nullstack {
-
- static async start({project}) {
- project.name = 'Nullstack';
- project.shortName = 'Nullstack';
- project.domain = 'nullstack.app';
- project.color = '#d22365';
- project.backgroundColor = '#d22365';
- project.type = 'website';
- project.display = 'standalone';
- project.orientation = 'portrait';
- project.scope = '/';
- project.root = '/';
- project.icons = {
- '72': '/icon-72x72.png',
- '128': '/icon-128x128.png',
- '512': '/icon-512x512.png'
- };
- project.favicon = '/favicon.png';
- project.disallow = ['/admin'];
- project.sitemap = true;
- project.cdn = 'cdn.nullstack.app';
- project.protocol = 'https';
- }
-
- prepare({project, page}) {
- page.title = project.name;
- }
-
-}
-
-export default Application;
---💡 You can override the automatically generated manifest.json and robots.txt by serving your own file from the public folder
-
Next step
⚔ Learn about the context settings.
Context Project
-
-
- Type:
object
- - Origin: Nullstack Context -
- Availability: server/client -
- readwrite in the server context -
- readonly in the client context -
It gives you information about the app manifest and some metatags.
-project keys will be used to generate metatags during server-side rendering and must be assigned before initiate is resolved.
project keys will be used to generate the app manifest and should be set during the application startup.
The disallow key will be used to generate the robots.txt and should be set during the application startup.
project keys are frozen after the application startup.
The following keys are available in the object:
--
-
- domain:
string
- - name:
string
- - shortName:
string
- - color:
string
- - backgroundColor:
string
- - type:
string
- - display:
string
- - orientation:
string
- - scope:
string
- - root:
string
- - icons:
object
- - favicon:
string(relative or absolute url)
- - disallow:
string array(relative paths)
- - sitemap:
booleanorstring(relative or absolute url)
- - cdn:
string(absolute url)
- - protocol:
string(http or https)
-
Besides domain, name and color all other keys have sensible defaults generated based on the application scope.
If you do not declare the icons key, Nullstack will scan any icons with the name following the pattern "icon-[WIDTH]x[HEIGHT].png" in your public folder.
If the sitemap key is set to true your robots.txt file will point the sitemap to https://${project.domain}/sitemap.xml.
The cdn key will prefix your asset bundles and will be available in the context so you can manually prefix other assets.
The protocol key is "http" in development mode and "https" in production mode by default.
import Nullstack from 'nullstack';
-
-class Application extends Nullstack {
-
- static async start({project}) {
- project.name = 'Nullstack';
- project.shortName = 'Nullstack';
- project.domain = 'nullstack.app';
- project.color = '#d22365';
- project.backgroundColor = '#d22365';
- project.type = 'website';
- project.display = 'standalone';
- project.orientation = 'portrait';
- project.scope = '/';
- project.root = '/';
- project.icons = {
- '72': '/icon-72x72.png',
- '128': '/icon-128x128.png',
- '512': '/icon-512x512.png'
- };
- project.favicon = '/favicon.png';
- project.disallow = ['/admin'];
- project.sitemap = true;
- project.cdn = 'cdn.nullstack.app';
- project.protocol = 'https';
- }
-
- prepare({project, page}) {
- page.title = project.name;
- }
-
-}
-
-export default Application;
---💡 You can override the automatically generated manifest.json and robots.txt by serving your own file from the public folder
-
Next step
⚔ Learn about the context settings.
- \n
- Type:
object\n - Origin: Nullstack Context \n
- Availability: server/client \n
- readwrite in the server context \n
- readonly in the client context \n
It gives you information about the app manifest and some metatags.
\nproject keys will be used to generate metatags during server-side rendering and must be assigned before initiate is resolved.
project keys will be used to generate the app manifest and should be set during the application startup.
The disallow key will be used to generate the robots.txt and should be set during the application startup.
project keys are frozen after the application startup.
The following keys are available in the object:
\n- \n
- domain:
string\n - name:
string\n - shortName:
string\n - color:
string\n - backgroundColor:
string\n - type:
string\n - display:
string\n - orientation:
string\n - scope:
string\n - root:
string\n - icons:
object\n - favicon:
string(relative or absolute url) \n - disallow:
string array(relative paths) \n - sitemap:
booleanorstring(relative or absolute url) \n - cdn:
string(absolute url) \n - protocol:
string(http or https) \n
Besides domain, name and color all other keys have sensible defaults generated based on the application scope.
If you do not declare the icons key, Nullstack will scan any icons with the name following the pattern "icon-[WIDTH]x[HEIGHT].png" in your public folder.
If the sitemap key is set to true your robots.txt file will point the sitemap to https://${project.domain}/sitemap.xml.
The cdn key will prefix your asset bundles and will be available in the context so you can manually prefix other assets.
The protocol key is "http" in development mode and "https" in production mode by default.
import Nullstack from 'nullstack';\n\nclass Application extends Nullstack {\n\n static async start({project}) {\n project.name = 'Nullstack';\n project.shortName = 'Nullstack';\n project.domain = 'nullstack.app';\n project.color = '#d22365';\n project.backgroundColor = '#d22365';\n project.type = 'website';\n project.display = 'standalone';\n project.orientation = 'portrait';\n project.scope = '/';\n project.root = '/';\n project.icons = {\n '72': '/icon-72x72.png',\n '128': '/icon-128x128.png',\n '512': '/icon-512x512.png'\n };\n project.favicon = '/favicon.png';\n project.disallow = ['/admin'];\n project.sitemap = true;\n project.cdn = 'cdn.nullstack.app';\n project.protocol = 'https';\n }\n\n prepare({project, page}) {\n page.title = project.name;\n }\n\n}\n\nexport default Application;\n\n\n💡 You can override the automatically generated manifest.json and robots.txt by serving your own file from the public folder
\n
Next step
⚔ Learn about the context settings.
Context Secrets
-
-
- Type:
object
- - Origin: Nullstack Context -
- Availability: server -
- readwrite in server context -
You can use it to configure your application with private information.
-secrets keys are frozen after the application startup.
The following keys are available in the object:
--
-
- development:
object
- - production:
object
- - [anySetting]:
any
-
You can assign keys to development or production keys in order to have different secrets per environment.
If you assign a key directly to the secrets object it will be available in both environments.
When reading from a key you must read directly from the secrets object and Nullstack will return the best-suited value for that environment.
import Nullstack from 'nullstack';
-
-class Application extends Nullstack {
-
- static async start({secrets}) {
- secrets.development.privateKey = 'SANDBOX_API_KEY';
- secrets.production.privateKey = 'PRODUCTION_API_KEY';
- secrets.endpoint = 'https://domain.com/api';
- }
-
- static async fetchFromApi({secrets}) {
- const response = await fetch(secrets.endpoint, {
- headers: {
- Authorization: `Bearer ${secrets.privateKey}`
- }
- });
- return await response.json();
- }
-
-}
-
-export default Application;
-Any environment key starting with NULLSTACK_SECRETS_ will be mapped to the secrets in that environment.
---🐱💻 NULLSTACK_SECRETS_PRIVATE_KEY will be mapped to
-secrets.privateKey
Next step
⚔ Learn about the instance self.
-Context Secrets
-
-
- Type:
object
- - Origin: Nullstack Context -
- Availability: server -
- readwrite in server context -
You can use it to configure your application with private information.
-secrets keys are frozen after the application startup.
The following keys are available in the object:
--
-
- development:
object
- - production:
object
- - [anySetting]:
any
-
You can assign keys to development or production keys in order to have different secrets per environment.
If you assign a key directly to the secrets object it will be available in both environments.
When reading from a key you must read directly from the secrets object and Nullstack will return the best-suited value for that environment.
import Nullstack from 'nullstack';
-
-class Application extends Nullstack {
-
- static async start({secrets}) {
- secrets.development.privateKey = 'SANDBOX_API_KEY';
- secrets.production.privateKey = 'PRODUCTION_API_KEY';
- secrets.endpoint = 'https://domain.com/api';
- }
-
- static async fetchFromApi({secrets}) {
- const response = await fetch(secrets.endpoint, {
- headers: {
- Authorization: `Bearer ${secrets.privateKey}`
- }
- });
- return await response.json();
- }
-
-}
-
-export default Application;
-Any environment key starting with NULLSTACK_SECRETS_ will be mapped to the secrets in that environment.
---🐱💻 NULLSTACK_SECRETS_PRIVATE_KEY will be mapped to
-secrets.privateKey
Next step
⚔ Learn about the instance self.
-- \n
- Type:
object\n - Origin: Nullstack Context \n
- Availability: server \n
- readwrite in server context \n
You can use it to configure your application with private information.
\nsecrets keys are frozen after the application startup.
The following keys are available in the object:
\n- \n
- development:
object\n - production:
object\n - [anySetting]:
any\n
You can assign keys to development or production keys in order to have different secrets per environment.
If you assign a key directly to the secrets object it will be available in both environments.
When reading from a key you must read directly from the secrets object and Nullstack will return the best-suited value for that environment.
import Nullstack from 'nullstack';\n\nclass Application extends Nullstack {\n\n static async start({secrets}) {\n secrets.development.privateKey = 'SANDBOX_API_KEY';\n secrets.production.privateKey = 'PRODUCTION_API_KEY';\n secrets.endpoint = 'https://domain.com/api';\n }\n\n static async fetchFromApi({secrets}) {\n const response = await fetch(secrets.endpoint, {\n headers: {\n Authorization: `Bearer ${secrets.privateKey}`\n }\n });\n return await response.json();\n }\n\n}\n\nexport default Application;\nAny environment key starting with NULLSTACK_SECRETS_ will be mapped to the secrets in that environment.
\n\n\n🐱💻 NULLSTACK_SECRETS_PRIVATE_KEY will be mapped to
\nsecrets.privateKey
Next step
⚔ Learn about the instance self.
\n","description":"The secrets object is a proxy in the Nullstack Context available in server which you can use to configure your application with private information"},"n-0-0-13":{},"n-0-0-15":{},"n-0-0-16":{"locale":"en-US","i18n":{"nullachan":{"alt":"Nulla-Chan","title":"Nulla-Chan: Nullstack's official waifu"},"links":[{"title":"YouTube","href":"https://www.youtube.com/channel/UCUNPaxoppH3lu6JTrUX78Ww"},{"title":"Twitter","href":"https://twitter.com/nullstackapp"},{"title":"GitHub","href":"https://github.com/nullstack"}]}}}, "page": {"image":"/image-1200x630.png","status":200,"title":"Context Secrets - Nullstack","description":"The secrets object is a proxy in the Nullstack Context available in server which you can use to configure your application with private information"}} \ No newline at end of file diff --git a/docs/context-settings.html b/docs/context-settings.html deleted file mode 100644 index a8e718b3..00000000 --- a/docs/context-settings.html +++ /dev/null @@ -1,98 +0,0 @@ - - - - - -Context Settings
-
-
- Type:
object
- - Origin: Nullstack Context -
- Availability: server/client -
- readwrite in server context -
- readonly in client context -
You can use it to configure your application with public information.
-settings keys are frozen after the application startup.
The following keys are available in the object:
--
-
- development:
object
- - production:
object
- - [anySetting]:
any
-
You can assign keys to development or production keys in order to have different settings per environment.
If you assign a key directly to the settings object it will be available in both environments.
When reading from a key you must read directly from the settings object and Nullstack will return the best-suited value for that environment.
import Nullstack from 'nullstack';
-
-class Application extends Nullstack {
-
- static async start({settings}) {
- settings.development.publicKey = 'SANDBOX_API_KEY';
- settings.production.publicKey = 'PRODUCTION_API_KEY';
- settings.endpoint = 'https://domain.com/api';
- }
-
- async hydrate({settings}) {
- const response = await fetch(settings.endpoint, {
- headers: {
- Authorization: `Bearer ${settings.publicKey}`
- }
- });
- this.data = await response.json();
- }
-
-}
-
-export default Application;
-Any environment key starting with NULLSTACK_SETTINGS_ will be mapped to the settings in that environment.
---🐱💻 NULLSTACK_SETTINGS_PUBLIC_KEY will be mapped to
-settings.publicKey
Next step
⚔ Learn about the context secrets.
Context Settings
-
-
- Type:
object
- - Origin: Nullstack Context -
- Availability: server/client -
- readwrite in server context -
- readonly in client context -
You can use it to configure your application with public information.
-settings keys are frozen after the application startup.
The following keys are available in the object:
--
-
- development:
object
- - production:
object
- - [anySetting]:
any
-
You can assign keys to development or production keys in order to have different settings per environment.
If you assign a key directly to the settings object it will be available in both environments.
When reading from a key you must read directly from the settings object and Nullstack will return the best-suited value for that environment.
import Nullstack from 'nullstack';
-
-class Application extends Nullstack {
-
- static async start({settings}) {
- settings.development.publicKey = 'SANDBOX_API_KEY';
- settings.production.publicKey = 'PRODUCTION_API_KEY';
- settings.endpoint = 'https://domain.com/api';
- }
-
- async hydrate({settings}) {
- const response = await fetch(settings.endpoint, {
- headers: {
- Authorization: `Bearer ${settings.publicKey}`
- }
- });
- this.data = await response.json();
- }
-
-}
-
-export default Application;
-Any environment key starting with NULLSTACK_SETTINGS_ will be mapped to the settings in that environment.
---🐱💻 NULLSTACK_SETTINGS_PUBLIC_KEY will be mapped to
-settings.publicKey
Next step
⚔ Learn about the context secrets.
- \n
- Type:
object\n - Origin: Nullstack Context \n
- Availability: server/client \n
- readwrite in server context \n
- readonly in client context \n
You can use it to configure your application with public information.
\nsettings keys are frozen after the application startup.
The following keys are available in the object:
\n- \n
- development:
object\n - production:
object\n - [anySetting]:
any\n
You can assign keys to development or production keys in order to have different settings per environment.
If you assign a key directly to the settings object it will be available in both environments.
When reading from a key you must read directly from the settings object and Nullstack will return the best-suited value for that environment.
import Nullstack from 'nullstack';\n\nclass Application extends Nullstack {\n\n static async start({settings}) {\n settings.development.publicKey = 'SANDBOX_API_KEY';\n settings.production.publicKey = 'PRODUCTION_API_KEY';\n settings.endpoint = 'https://domain.com/api';\n }\n\n async hydrate({settings}) {\n const response = await fetch(settings.endpoint, {\n headers: {\n Authorization: `Bearer ${settings.publicKey}`\n }\n });\n this.data = await response.json();\n }\n\n}\n\nexport default Application;\nAny environment key starting with NULLSTACK_SETTINGS_ will be mapped to the settings in that environment.
\n\n\n🐱💻 NULLSTACK_SETTINGS_PUBLIC_KEY will be mapped to
\nsettings.publicKey
Next step
⚔ Learn about the context secrets.
Context
Every function in Nullstack receives a context as the argument.
-There are two contexts, one for the client and another one for the server.
-The client context lives as long as the browser tab is open.
-The server context lives as long as the server is running.
-Both contexts are proxies that merge the keys of 3 objects:
-1 - Nullstack Context
These are the information that the framework makes available to you by default.
-The available global keys in both server and client are:
-The keys available only in server functions are:
-The available instance client keys are:
-2 - Application Context
When you set a key to the context it will be available for destructuring at any depth of the application, even the parents of your component or 3rd party applications that mount your component.
-Updating a key in the context causes the application to re-render automatically.
-You can think of this as a single concept to replace stores, contexts, services, and reducers at the same time using the dependency injection pattern with vanilla javascript objects instead.
-import Nullstack from 'nullstack';
-
-class Counter extends Nullstack {
-
- prepare(context) {
- context.count = 1;
- }
-
- static async updateTotalCount(context) {
- context.totalCount += context.count;
- }
-
- async double(context) {
- context.count += context.count;
- await this.updateTotalCount();
- }
-
- render({count}) {
- return (
- <button onclick={this.double}> {count} </button>
- )
- }
-
-}
-
-export default Counter;
-import Nullstack from 'nullstack';
-import Counter from './Counter';
-
-class Application extends Nullstack {
-
- static async start(context) {
- context.totalCount = 0;
- }
-
- render({count}) {
- return (
- <main>
- {(!count || count < 10) && <Counter />}
- </main>
- )
- }
-
-}
-
-export default Application;
-3 - Component Context
This one contains the attributes you declare in your tag, including data.
If the attribute is declared in a component tag every function of that component will have access to that attribute in its context.
-If the attribute is declared in a tag that has an event it will be merged into the event function context.
-import Nullstack from 'nullstack';
-
-class Counter extends Nullstack {
-
- add(context) {
- context.count += context.delta + context.amount;
- }
-
- render({count, delta}) {
- return (
- <button onclick={this.add} amount={1}>
- add {delta} to {count}
- </button>
- )
- }
-
-}
-
-export default Counter;
-import Nullstack from 'nullstack';
-import Counter from './Counter';
-
-class Application extends Nullstack {
-
- prepare(context) {
- context.count = 0;
- }
-
- render() {
- return (
- <main>
- <Counter delta={2} />
- </main>
- )
- }
-
-}
-
-export default Application;
-Functions Context
Every function of subclasses of Nullstack is injected with a copy of the instance context merged with its arguments.
-Arguments are optional, but if declared, must be a single object with keys of your choice.
-import Nullstack from 'nullstack';
-
-class Counter extends Nullstack {
-
- add(context) {
- context.count += context.amount || 1;
- }
-
- prepare(context) {
- context.count = 0;
- this.add(); // sums 1
- this.add({amount: 2}); // sums 2
- }
-
- async initiate(context) {
- console.log(context.count); // 3
- }
-
-}
-
-export default Counter;
-Next step
⚔ Learn about routes and params.
-Context
Every function in Nullstack receives a context as the argument.
-There are two contexts, one for the client and another one for the server.
-The client context lives as long as the browser tab is open.
-The server context lives as long as the server is running.
-Both contexts are proxies that merge the keys of 3 objects:
-1 - Nullstack Context
These are the information that the framework makes available to you by default.
-The available global keys in both server and client are:
-The keys available only in server functions are:
-The available instance client keys are:
-2 - Application Context
When you set a key to the context it will be available for destructuring at any depth of the application, even the parents of your component or 3rd party applications that mount your component.
-Updating a key in the context causes the application to re-render automatically.
-You can think of this as a single concept to replace stores, contexts, services, and reducers at the same time using the dependency injection pattern with vanilla javascript objects instead.
-import Nullstack from 'nullstack';
-
-class Counter extends Nullstack {
-
- prepare(context) {
- context.count = 1;
- }
-
- static async updateTotalCount(context) {
- context.totalCount += context.count;
- }
-
- async double(context) {
- context.count += context.count;
- await this.updateTotalCount();
- }
-
- render({count}) {
- return (
- <button onclick={this.double}> {count} </button>
- )
- }
-
-}
-
-export default Counter;
-import Nullstack from 'nullstack';
-import Counter from './Counter';
-
-class Application extends Nullstack {
-
- static async start(context) {
- context.totalCount = 0;
- }
-
- render({count}) {
- return (
- <main>
- {(!count || count < 10) && <Counter />}
- </main>
- )
- }
-
-}
-
-export default Application;
-3 - Component Context
This one contains the attributes you declare in your tag, including data.
If the attribute is declared in a component tag every function of that component will have access to that attribute in its context.
-If the attribute is declared in a tag that has an event it will be merged into the event function context.
-import Nullstack from 'nullstack';
-
-class Counter extends Nullstack {
-
- add(context) {
- context.count += context.delta + context.amount;
- }
-
- render({count, delta}) {
- return (
- <button onclick={this.add} amount={1}>
- add {delta} to {count}
- </button>
- )
- }
-
-}
-
-export default Counter;
-import Nullstack from 'nullstack';
-import Counter from './Counter';
-
-class Application extends Nullstack {
-
- prepare(context) {
- context.count = 0;
- }
-
- render() {
- return (
- <main>
- <Counter delta={2} />
- </main>
- )
- }
-
-}
-
-export default Application;
-Functions Context
Every function of subclasses of Nullstack is injected with a copy of the instance context merged with its arguments.
-Arguments are optional, but if declared, must be a single object with keys of your choice.
-import Nullstack from 'nullstack';
-
-class Counter extends Nullstack {
-
- add(context) {
- context.count += context.amount || 1;
- }
-
- prepare(context) {
- context.count = 0;
- this.add(); // sums 1
- this.add({amount: 2}); // sums 2
- }
-
- async initiate(context) {
- console.log(context.count); // 3
- }
-
-}
-
-export default Counter;
-Next step
⚔ Learn about routes and params.
-Every function in Nullstack receives a context as the argument.
\nThere are two contexts, one for the client and another one for the server.
\nThe client context lives as long as the browser tab is open.
\nThe server context lives as long as the server is running.
\nBoth contexts are proxies that merge the keys of 3 objects:
\n1 - Nullstack Context
These are the information that the framework makes available to you by default.
\nThe available global keys in both server and client are:
\nThe keys available only in server functions are:
\nThe available instance client keys are:
\n2 - Application Context
When you set a key to the context it will be available for destructuring at any depth of the application, even the parents of your component or 3rd party applications that mount your component.
\nUpdating a key in the context causes the application to re-render automatically.
\nYou can think of this as a single concept to replace stores, contexts, services, and reducers at the same time using the dependency injection pattern with vanilla javascript objects instead.
\nimport Nullstack from 'nullstack';\n\nclass Counter extends Nullstack {\n\n prepare(context) {\n context.count = 1;\n }\n\n static async updateTotalCount(context) {\n context.totalCount += context.count;\n }\n\n async double(context) {\n context.count += context.count;\n await this.updateTotalCount();\n }\n\n render({count}) {\n return (\n <button onclick={this.double}> {count} </button>\n )\n }\n\n}\n\nexport default Counter;\nimport Nullstack from 'nullstack';\nimport Counter from './Counter';\n\nclass Application extends Nullstack {\n\n static async start(context) {\n context.totalCount = 0;\n }\n\n render({count}) {\n return (\n <main>\n {(!count || count < 10) && <Counter />}\n </main>\n )\n }\n\n}\n\nexport default Application;\n3 - Component Context
This one contains the attributes you declare in your tag, including data.
If the attribute is declared in a component tag every function of that component will have access to that attribute in its context.
\nIf the attribute is declared in a tag that has an event it will be merged into the event function context.
\nimport Nullstack from 'nullstack';\n\nclass Counter extends Nullstack {\n\n add(context) {\n context.count += context.delta + context.amount;\n }\n\n render({count, delta}) {\n return (\n <button onclick={this.add} amount={1}>\n add {delta} to {count}\n </button>\n )\n }\n\n}\n\nexport default Counter;\nimport Nullstack from 'nullstack';\nimport Counter from './Counter';\n\nclass Application extends Nullstack {\n\n prepare(context) {\n context.count = 0;\n }\n\n render() {\n return (\n <main>\n <Counter delta={2} />\n </main>\n )\n }\n\n}\n\nexport default Application;\nFunctions Context
Every function of subclasses of Nullstack is injected with a copy of the instance context merged with its arguments.
\nArguments are optional, but if declared, must be a single object with keys of your choice.
\nimport Nullstack from 'nullstack';\n\nclass Counter extends Nullstack {\n\n add(context) {\n context.count += context.amount || 1;\n }\n\n prepare(context) {\n context.count = 0;\n this.add(); // sums 1\n this.add({amount: 2}); // sums 2\n }\n\n async initiate(context) {\n console.log(context.count); // 3\n }\n\n}\n\nexport default Counter;\nNext step
⚔ Learn about routes and params.
\n","description":"Every function in Nullstack receives a context as the argument."},"n-0-0-13":{},"n-0-0-15":{},"n-0-0-16":{"locale":"en-US","i18n":{"nullachan":{"alt":"Nulla-Chan","title":"Nulla-Chan: Nullstack's official waifu"},"links":[{"title":"YouTube","href":"https://www.youtube.com/channel/UCUNPaxoppH3lu6JTrUX78Ww"},{"title":"Twitter","href":"https://twitter.com/nullstackapp"},{"title":"GitHub","href":"https://github.com/nullstack"}]}}}, "page": {"image":"/image-1200x630.png","status":200,"title":"Context - Nullstack","description":"Every function in Nullstack receives a context as the argument."}} \ No newline at end of file diff --git a/docs/contexto-page.html b/docs/contexto-page.html deleted file mode 100644 index 3f813663..00000000 --- a/docs/contexto-page.html +++ /dev/null @@ -1,54 +0,0 @@ - - - - - -Page Not Found
Perhaps you want to learn about how to make a 404 page with Nullstack?
-If you are looking for something else, you should read the documentation.
-Page Not Found
Perhaps you want to learn about how to make a 404 page with Nullstack?
-If you are looking for something else, you should read the documentation.
-Perhaps you want to learn about how to make a 404 page with Nullstack?
\nIf you are looking for something else, you should read the documentation.
\n","description":"Sorry, this is not the page you are looking for.","status":404},"n-0-0-13":{},"n-0-0-15":{},"n-0-0-16":{"locale":"en-US","i18n":{"nullachan":{"alt":"Nulla-Chan","title":"Nulla-Chan: Nullstack's official waifu"},"links":[{"title":"YouTube","href":"https://www.youtube.com/channel/UCUNPaxoppH3lu6JTrUX78Ww"},{"title":"Twitter","href":"https://twitter.com/nullstackapp"},{"title":"GitHub","href":"https://github.com/nullstack"}]}}}, "page": {"image":"/image-1200x630.png","status":404,"title":"Page Not Found - Nullstack","description":"Sorry, this is not the page you are looking for."}} \ No newline at end of file diff --git a/docs/contributors.html b/docs/contributors.html deleted file mode 100644 index ff359e84..00000000 --- a/docs/contributors.html +++ /dev/null @@ -1,52 +0,0 @@ - - - - - -The State of Nullstack
Nullstack is being developed since January 2019 with features being extracted from freelancing projects.
At this point the API is stable, lifecycle methods and context keys will pretty much be frozen.
We are not yet on 1.0 but really close, the only thing missing is to test it on applications made outside the core team to figure out if it fits the needs of other programmers.
The Roadmap
The next updates will be guided towards fixing any bugs that are found and focus on quality of life.
The updates listed on Nullstack issues are the next planned steps without any particular order.
The Core Team
Nullstack was developed by full-stack neuro-atypical freelancers.
With a heavy background in Rails, Ember.js, React.js and the Vue.js philosophy the inspirations took from those projects might be obvious.
Christian Mortaro
Autistic Author
Creator of the concept. Comes with new API proposals to its favorite rubber ducks and returns with commits.
Reverse engineered wishful thinking code into existence and then refactored it into a framework.
Dayson Marx
Distracted Designer
Rubber duck with human skills that makes sure the code is not going too far outside the box, then makes the box look nice.
API reviewer that developed third party projects to test proof of concepts from a front-end focused perspective.
Anny Figueira
Autistic Adopter
Rubber duck with a neck to find inconsistencies and problems, waiting till an API is approved to force us into rewriting everything.
An early adopter of the framework that developed real production applications to validate how the parts fit together.
Bianca Augusta
Autistic Artist
Freelance illustrator for 10 years. Warcraft addict, aspiring cosplayer and druid tanker in WoW.
Mother of Nulla-Chan and reads scripts here and there under pure pressure from Mortaro.
Guilherme Correia
import Member from vuejs-br
Experimentalist, universes writer, dreamer and developer when finds and plays the right untitled cassette tape.
User of undocumented features and creator of issues requiring documentation that he will do himself.
Alisson Suassuna
God's servant
TipsCode instructor. Full-stack JavaScript developer, passionate about technology and servant of the Lord Jesus Christ.
In charge of creating content about Nullstack, classes, tips and tutorials. Focused in making Nullstack easy to use.
Packages Contributors
* The list might take a while to update due to GitHub API cache
Documentation Contributors
* The list might take a while to update due to GitHub API cache
How to Contribute
It's simple. Found a bug or want a new feature?
Create an issue or submit a pull request with tests.
The State of Nullstack
Nullstack is being developed since January 2019 with features being extracted from freelancing projects.
At this point the API is stable, lifecycle methods and context keys will pretty much be frozen.
We are not yet on 1.0 but really close, the only thing missing is to test it on applications made outside the core team to figure out if it fits the needs of other programmers.
The Roadmap
The next updates will be guided towards fixing any bugs that are found and focus on quality of life.
The updates listed on Nullstack issues are the next planned steps without any particular order.
The Core Team
Nullstack was developed by full-stack neuro-atypical freelancers.
With a heavy background in Rails, Ember.js, React.js and the Vue.js philosophy the inspirations took from those projects might be obvious.
Christian Mortaro
Autistic Author
Creator of the concept. Comes with new API proposals to its favorite rubber ducks and returns with commits.
Reverse engineered wishful thinking code into existence and then refactored it into a framework.
Dayson Marx
Distracted Designer
Rubber duck with human skills that makes sure the code is not going too far outside the box, then makes the box look nice.
API reviewer that developed third party projects to test proof of concepts from a front-end focused perspective.
Anny Figueira
Autistic Adopter
Rubber duck with a neck to find inconsistencies and problems, waiting till an API is approved to force us into rewriting everything.
An early adopter of the framework that developed real production applications to validate how the parts fit together.
Bianca Augusta
Autistic Artist
Freelance illustrator for 10 years. Warcraft addict, aspiring cosplayer and druid tanker in WoW.
Mother of Nulla-Chan and reads scripts here and there under pure pressure from Mortaro.
Guilherme Correia
import Member from vuejs-br
Experimentalist, universes writer, dreamer and developer when finds and plays the right untitled cassette tape.
User of undocumented features and creator of issues requiring documentation that he will do himself.
Alisson Suassuna
God's servant
TipsCode instructor. Full-stack JavaScript developer, passionate about technology and servant of the Lord Jesus Christ.
In charge of creating content about Nullstack, classes, tips and tutorials. Focused in making Nullstack easy to use.
Packages Contributors
* The list might take a while to update due to GitHub API cache
Documentation Contributors
* The list might take a while to update due to GitHub API cache
How to Contribute
It's simple. Found a bug or want a new feature?
Create an issue or submit a pull request with tests.
Nullstack Documentation
Follow these steps and become a full-stack javascript developer!
Core concepts
Start your journey in Nullstack with these basic concepts
Advanced concepts
These are concepts that you will most likely learn as you need in your projects
Examples
The best way to learn Nullstack is by reading some code
Nullstack Documentation
Follow these steps and become a full-stack javascript developer!
Core concepts
Start your journey in Nullstack with these basic concepts
Advanced concepts
These are concepts that you will most likely learn as you need in your projects
Examples
The best way to learn Nullstack is by reading some code
Full-Stack Lifecycle
Lifecycle methods are special named functions that you can declare in the class.
-Each lifecycle method runs in a specific order in a queue so it's guaranteed that all components initiated in that cycle will be prepared before the first one is initiated.
-Prepare
This method is blocking and runs before the first time the component is rendered.
-You can use this function to set the state that the user will see before things are loaded.
-If the user is entering from this route prepare will run in the server before Nullstack server-side renders your application.
If the user is navigating from another route this method will run in the client.
-import Nullstack from 'nullstack';
-
-class Component extends Nullstack {
-
- // ...
-
- prepare() {
- this.date = new Date();
- }
-
- // ...
-
-}
-
-export default Component;
-Initiate
This method can be async and runs right after the component is prepared and rendered for the first time.
-You can use this function to invoke another server function and load the data to present the page.
-If the user is entering from this route initiate will run in the server.
Nullstack will wait till the promise is resolved and then finally generate the HTML that will be served.
-If the user is navigating from another route this method will run in the client.
-import Nullstack from 'nullstack';
-
-class Component extends Nullstack {
-
- // ...
-
- async initiate() {
- this.task = await getTaskByDay({
- day: this.date
- });
- }
-
- // ...
-
-}
-
-export default Component;
---✨ Learn more about server functions.
-
Hydrate
This method is async and will only run in the client.
-This method will always run no matter which environment started the component.
-This is a good place to trigger dependencies that manipulate the dom or can only run on the client-side.
-import Nullstack from 'nullstack';
-
-class Component extends Nullstack {
-
- // ...
-
- async hydrate() {
- this.timer = setInterval(() => {
- console.log(this.date);
- }, 1000);
- }
-
- // ...
-
-}
-
-export default Component;
-Update
This method is async and will only run in the client.
-This method runs on every component anytime the application state changes.
---🔥 Be careful not to cause infinite loopings when mutating state inside
-update.
This will run right before rendering but will not block the rendering queue.
-The update function will not start running until the application is rendered after the initiate.
import Nullstack from 'nullstack';
-
-class Component extends Nullstack {
-
- // ...
-
- async update() {
- const today = new Date();
- if(today.getDay() != this.date.getDay()) {
- this.date = today;
- await this.initiate();
- }
- }
-
- // ...
-
-}
-
-export default Component;
---✨ Lifecycle methods have no special side effects, you can call them manually without causing problems.
-
Terminate
This method is async and will only run in the client.
-This method will run after your component leaves the DOM.
-This is the place to clean up whatever you set up in the hydrate method.
The instance will be garbage collected after the Promise is resolved.
import Nullstack from 'nullstack';
-
-class Component extends Nullstack {
-
- // ...
-
- async terminate() {
- clearInterval(this.timer);
- }
-
- // ...
-
-}
-
-export default Component;
-Next steps
⚔ Learn about server functions.
-Full-Stack Lifecycle
Lifecycle methods are special named functions that you can declare in the class.
-Each lifecycle method runs in a specific order in a queue so it's guaranteed that all components initiated in that cycle will be prepared before the first one is initiated.
-Prepare
This method is blocking and runs before the first time the component is rendered.
-You can use this function to set the state that the user will see before things are loaded.
-If the user is entering from this route prepare will run in the server before Nullstack server-side renders your application.
If the user is navigating from another route this method will run in the client.
-import Nullstack from 'nullstack';
-
-class Component extends Nullstack {
-
- // ...
-
- prepare() {
- this.date = new Date();
- }
-
- // ...
-
-}
-
-export default Component;
-Initiate
This method can be async and runs right after the component is prepared and rendered for the first time.
-You can use this function to invoke another server function and load the data to present the page.
-If the user is entering from this route initiate will run in the server.
Nullstack will wait till the promise is resolved and then finally generate the HTML that will be served.
-If the user is navigating from another route this method will run in the client.
-import Nullstack from 'nullstack';
-
-class Component extends Nullstack {
-
- // ...
-
- async initiate() {
- this.task = await getTaskByDay({
- day: this.date
- });
- }
-
- // ...
-
-}
-
-export default Component;
---✨ Learn more about server functions.
-
Hydrate
This method is async and will only run in the client.
-This method will always run no matter which environment started the component.
-This is a good place to trigger dependencies that manipulate the dom or can only run on the client-side.
-import Nullstack from 'nullstack';
-
-class Component extends Nullstack {
-
- // ...
-
- async hydrate() {
- this.timer = setInterval(() => {
- console.log(this.date);
- }, 1000);
- }
-
- // ...
-
-}
-
-export default Component;
-Update
This method is async and will only run in the client.
-This method runs on every component anytime the application state changes.
---🔥 Be careful not to cause infinite loopings when mutating state inside
-update.
This will run right before rendering but will not block the rendering queue.
-The update function will not start running until the application is rendered after the initiate.
import Nullstack from 'nullstack';
-
-class Component extends Nullstack {
-
- // ...
-
- async update() {
- const today = new Date();
- if(today.getDay() != this.date.getDay()) {
- this.date = today;
- await this.initiate();
- }
- }
-
- // ...
-
-}
-
-export default Component;
---✨ Lifecycle methods have no special side effects, you can call them manually without causing problems.
-
Terminate
This method is async and will only run in the client.
-This method will run after your component leaves the DOM.
-This is the place to clean up whatever you set up in the hydrate method.
The instance will be garbage collected after the Promise is resolved.
import Nullstack from 'nullstack';
-
-class Component extends Nullstack {
-
- // ...
-
- async terminate() {
- clearInterval(this.timer);
- }
-
- // ...
-
-}
-
-export default Component;
-Next steps
⚔ Learn about server functions.
-Lifecycle methods are special named functions that you can declare in the class.
\nEach lifecycle method runs in a specific order in a queue so it's guaranteed that all components initiated in that cycle will be prepared before the first one is initiated.
\nPrepare
This method is blocking and runs before the first time the component is rendered.
\nYou can use this function to set the state that the user will see before things are loaded.
\nIf the user is entering from this route prepare will run in the server before Nullstack server-side renders your application.
If the user is navigating from another route this method will run in the client.
\nimport Nullstack from 'nullstack';\n\nclass Component extends Nullstack {\n\n // ...\n\n prepare() {\n this.date = new Date();\n }\n\n // ...\n\n}\n\nexport default Component;\nInitiate
This method can be async and runs right after the component is prepared and rendered for the first time.
\nYou can use this function to invoke another server function and load the data to present the page.
\nIf the user is entering from this route initiate will run in the server.
Nullstack will wait till the promise is resolved and then finally generate the HTML that will be served.
\nIf the user is navigating from another route this method will run in the client.
\nimport Nullstack from 'nullstack';\n\nclass Component extends Nullstack {\n\n // ...\n\n async initiate() {\n this.task = await getTaskByDay({\n day: this.date\n });\n }\n\n // ...\n\n}\n\nexport default Component;\n\n\n✨ Learn more about server functions.
\n
Hydrate
This method is async and will only run in the client.
\nThis method will always run no matter which environment started the component.
\nThis is a good place to trigger dependencies that manipulate the dom or can only run on the client-side.
\nimport Nullstack from 'nullstack';\n\nclass Component extends Nullstack {\n\n // ...\n\n async hydrate() {\n this.timer = setInterval(() => {\n console.log(this.date);\n }, 1000);\n }\n\n // ...\n\n}\n\nexport default Component;\nUpdate
This method is async and will only run in the client.
\nThis method runs on every component anytime the application state changes.
\n\n\n🔥 Be careful not to cause infinite loopings when mutating state inside
\nupdate.
This will run right before rendering but will not block the rendering queue.
\nThe update function will not start running until the application is rendered after the initiate.
import Nullstack from 'nullstack';\n\nclass Component extends Nullstack {\n\n // ...\n\n async update() {\n const today = new Date();\n if(today.getDay() != this.date.getDay()) {\n this.date = today;\n await this.initiate();\n }\n }\n\n // ...\n\n}\n\nexport default Component;\n\n\n✨ Lifecycle methods have no special side effects, you can call them manually without causing problems.
\n
Terminate
This method is async and will only run in the client.
\nThis method will run after your component leaves the DOM.
\nThis is the place to clean up whatever you set up in the hydrate method.
The instance will be garbage collected after the Promise is resolved.
import Nullstack from 'nullstack';\n\nclass Component extends Nullstack {\n\n // ...\n\n async terminate() {\n clearInterval(this.timer);\n }\n\n // ...\n\n}\n\nexport default Component;\nNext steps
⚔ Learn about server functions.
\n","description":"Lifecycle methods are special named functions that you can declare in the class."},"n-0-0-13":{},"n-0-0-15":{},"n-0-0-16":{"locale":"en-US","i18n":{"nullachan":{"alt":"Nulla-Chan","title":"Nulla-Chan: Nullstack's official waifu"},"links":[{"title":"YouTube","href":"https://www.youtube.com/channel/UCUNPaxoppH3lu6JTrUX78Ww"},{"title":"Twitter","href":"https://twitter.com/nullstackapp"},{"title":"GitHub","href":"https://github.com/nullstack"}]}}}, "page": {"image":"/image-1200x630.png","status":200,"title":"Full-Stack Lifecycle - Nullstack","description":"Lifecycle methods are special named functions that you can declare in the class."}} \ No newline at end of file diff --git a/docs/getting-started.html b/docs/getting-started.html deleted file mode 100644 index cc9e6d3f..00000000 --- a/docs/getting-started.html +++ /dev/null @@ -1,128 +0,0 @@ - - - - - -Getting Started
--📌 You can watch a video tutorial on our Youtube Channel.
-
Create full-stack javascript applications within seconds using npx to generate your project files from the latest template.
--🔥 The minimum required node.js version for development mode is 12.12.0.
-
--⚠ If the directory you are in contains spaces, you use Windows and
-npxgives errors, read about the known npx bug.
Replace project-name with your project name and run the command below to start a project:
npx create-nullstack-app project-name
-Change directory to the generated folder:
-cd project-name
-Install the dependencies:
-npm install
-Start the application in development mode:
-npm start
-Understanding the generated files
The following folders and files will be generated:
-index.js
This is the Webpack entry point.
-Usually, you don't have to touch this file, but it is a convenient place to import global dependencies like CSS frameworks.
-src/
This folder will contain the actual source code of your application.
-src/Application.njs
This is your application main file.
---✨ Learn more about the njs file extension.
-
The start function will be automatically called once when you run npm start, use it to populate your server context with things like database, settings, and secrets.
--✨ Learn more about the application startup.
-
src/Application.scss
This is an empty file just to demonstrate that you can use SCSS with Nullstack.
-It is a good practice to import a style file in a component with the same name.
---✨ Learn more about styles.
-
public/
Every file in here will be available to anyone from the domain root.
-By default create-nullstack-app generates the icons required for your manifest.json and images for OG meta tags.
--✨ Learn more about manifest.json.
-
Be sure to replace these images with your project identity.
-.development/
This is the compiled result of your application in development mode.
---🔥 Do not touch this folder
-
.production/
This is the compiled result of your application in production mode.
---🔥 Do not touch this folder
-
--✨ Learn more about how to deploy a Nullstack application.
-
The known npx bug
Warned on npx issues like #100, #110 and #143, it has an error when trying to resolve the path to his cache folder when contains spaces.
If this happens to you, our recommendations are:
--
-
Using downloaded as you normally would with
-npm:npm i -g create-nullstack-app -create-nullstack-app project-name -
-or, change the cache folder directory, as stated here and here:
--
-
- If you want to keep the use of space, replace
FirstNamewith the one used on your path and run:
-
-npm config set cache "C:\Users\FirstName~1\AppData\Roaming\npm-cache" --global --
-
- or, using another path without spaces: -
npm config set cache C:\tmp\nodejs\npm-cache --global -
-- If you want to keep the use of space, replace
Next step
⚔ Create your first renderable component.
-Getting Started
--📌 You can watch a video tutorial on our Youtube Channel.
-
Create full-stack javascript applications within seconds using npx to generate your project files from the latest template.
--🔥 The minimum required node.js version for development mode is 12.12.0.
-
--⚠ If the directory you are in contains spaces, you use Windows and
-npxgives errors, read about the known npx bug.
Replace project-name with your project name and run the command below to start a project:
npx create-nullstack-app project-name
-Change directory to the generated folder:
-cd project-name
-Install the dependencies:
-npm install
-Start the application in development mode:
-npm start
-Understanding the generated files
The following folders and files will be generated:
-index.js
This is the Webpack entry point.
-Usually, you don't have to touch this file, but it is a convenient place to import global dependencies like CSS frameworks.
-src/
This folder will contain the actual source code of your application.
-src/Application.njs
This is your application main file.
---✨ Learn more about the njs file extension.
-
The start function will be automatically called once when you run npm start, use it to populate your server context with things like database, settings, and secrets.
--✨ Learn more about the application startup.
-
src/Application.scss
This is an empty file just to demonstrate that you can use SCSS with Nullstack.
-It is a good practice to import a style file in a component with the same name.
---✨ Learn more about styles.
-
public/
Every file in here will be available to anyone from the domain root.
-By default create-nullstack-app generates the icons required for your manifest.json and images for OG meta tags.
--✨ Learn more about manifest.json.
-
Be sure to replace these images with your project identity.
-.development/
This is the compiled result of your application in development mode.
---🔥 Do not touch this folder
-
.production/
This is the compiled result of your application in production mode.
---🔥 Do not touch this folder
-
--✨ Learn more about how to deploy a Nullstack application.
-
The known npx bug
Warned on npx issues like #100, #110 and #143, it has an error when trying to resolve the path to his cache folder when contains spaces.
If this happens to you, our recommendations are:
--
-
Using downloaded as you normally would with
-npm:npm i -g create-nullstack-app -create-nullstack-app project-name -
-or, change the cache folder directory, as stated here and here:
--
-
- If you want to keep the use of space, replace
FirstNamewith the one used on your path and run:
-
-npm config set cache "C:\Users\FirstName~1\AppData\Roaming\npm-cache" --global --
-
- or, using another path without spaces: -
npm config set cache C:\tmp\nodejs\npm-cache --global -
-- If you want to keep the use of space, replace
Next step
⚔ Create your first renderable component.
-\n\n📌 You can watch a video tutorial on our Youtube Channel.
\n
Create full-stack javascript applications within seconds using npx to generate your project files from the latest template.
\n\n🔥 The minimum required node.js version for development mode is 12.12.0.
\n
\n\n⚠ If the directory you are in contains spaces, you use Windows and
\nnpxgives errors, read about the known npx bug.
Replace project-name with your project name and run the command below to start a project:
npx create-nullstack-app project-name\nChange directory to the generated folder:
\ncd project-name\nInstall the dependencies:
\nnpm install\nStart the application in development mode:
\nnpm start\nUnderstanding the generated files
The following folders and files will be generated:
\nindex.js
This is the Webpack entry point.
\nUsually, you don't have to touch this file, but it is a convenient place to import global dependencies like CSS frameworks.
\nsrc/
This folder will contain the actual source code of your application.
\nsrc/Application.njs
This is your application main file.
\n\n\n✨ Learn more about the njs file extension.
\n
The start function will be automatically called once when you run npm start, use it to populate your server context with things like database, settings, and secrets.
\n\n✨ Learn more about the application startup.
\n
src/Application.scss
This is an empty file just to demonstrate that you can use SCSS with Nullstack.
\nIt is a good practice to import a style file in a component with the same name.
\n\n\n✨ Learn more about styles.
\n
public/
Every file in here will be available to anyone from the domain root.
\nBy default create-nullstack-app generates the icons required for your manifest.json and images for OG meta tags.
\n\n✨ Learn more about manifest.json.
\n
Be sure to replace these images with your project identity.
\n.development/
This is the compiled result of your application in development mode.
\n\n\n🔥 Do not touch this folder
\n
.production/
This is the compiled result of your application in production mode.
\n\n\n🔥 Do not touch this folder
\n
\n\n✨ Learn more about how to deploy a Nullstack application.
\n
The known npx bug
Warned on npx issues like #100, #110 and #143, it has an error when trying to resolve the path to his cache folder when contains spaces.
If this happens to you, our recommendations are:
\n- \n
Using downloaded as you normally would with
\nnpm:npm i -g create-nullstack-app\ncreate-nullstack-app project-name\n\nor, change the cache folder directory, as stated here and here:
\n- \n
- If you want to keep the use of space, replace
FirstNamewith the one used on your path and run: \n
\nnpm config set cache \"C:\\Users\\FirstName~1\\AppData\\Roaming\\npm-cache\" --global\n- \n
- or, using another path without spaces: \n
npm config set cache C:\\tmp\\nodejs\\npm-cache --global\n\n- If you want to keep the use of space, replace
Next step
⚔ Create your first renderable component.
\n","description":"Create full-stack javascript applications within seconds"},"n-0-0-13":{},"n-0-0-15":{},"n-0-0-16":{"locale":"en-US","i18n":{"nullachan":{"alt":"Nulla-Chan","title":"Nulla-Chan: Nullstack's official waifu"},"links":[{"title":"YouTube","href":"https://www.youtube.com/channel/UCUNPaxoppH3lu6JTrUX78Ww"},{"title":"Twitter","href":"https://twitter.com/nullstackapp"},{"title":"GitHub","href":"https://github.com/nullstack"}]}}}, "page": {"image":"/image-1200x630.png","status":200,"title":"Getting Started - Nullstack","description":"Create full-stack javascript applications within seconds"}} \ No newline at end of file diff --git a/docs/hero.svg b/docs/hero.svg deleted file mode 100644 index dc7dfffe..00000000 --- a/docs/hero.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/docs/how-to-deploy-a-nullstack-application.html b/docs/how-to-deploy-a-nullstack-application.html deleted file mode 100644 index 729e8145..00000000 --- a/docs/how-to-deploy-a-nullstack-application.html +++ /dev/null @@ -1,78 +0,0 @@ - - - - - -How to Deploy
With Nullstack it's easy to have your application up and running in production mode.
---🐱💻 stonks
-
Nullstack compiles your code and all your dependencies using Webpack.
-The output of the compilation is moved to the .production folder and is the only folder besides public that needs to be moved into the host machine.
-If you have project.cdn set you must move the public folder to the actual cdn.
--💡 It is important that the .production folder is present for environment detection
-
The host machine must have at least node v8.10.0 installed.
-You don't have to "npm install" in the host machine.
---✨ You can configure the environment using
-settingsandsecrets
To start the server just run:
-node .production/server.js
---✨ It is recommend the usage of a process manager like PM2
-
How to Deploy a static generated site with Nullstack
After you generate a static site, all you have to do is move the output folder to any host machine capable of serving HTML.
-Next step
--🎉 Congratulations. You are done with the advanced concepts!
-
⚔ Learn how to use MongoDB with Nullstack.
-How to Deploy
With Nullstack it's easy to have your application up and running in production mode.
---🐱💻 stonks
-
Nullstack compiles your code and all your dependencies using Webpack.
-The output of the compilation is moved to the .production folder and is the only folder besides public that needs to be moved into the host machine.
-If you have project.cdn set you must move the public folder to the actual cdn.
--💡 It is important that the .production folder is present for environment detection
-
The host machine must have at least node v8.10.0 installed.
-You don't have to "npm install" in the host machine.
---✨ You can configure the environment using
-settingsandsecrets
To start the server just run:
-node .production/server.js
---✨ It is recommend the usage of a process manager like PM2
-
How to Deploy a static generated site with Nullstack
After you generate a static site, all you have to do is move the output folder to any host machine capable of serving HTML.
-Next step
--🎉 Congratulations. You are done with the advanced concepts!
-
⚔ Learn how to use MongoDB with Nullstack.
-With Nullstack it's easy to have your application up and running in production mode.
\n\n\n🐱💻 stonks
\n
Nullstack compiles your code and all your dependencies using Webpack.
\nThe output of the compilation is moved to the .production folder and is the only folder besides public that needs to be moved into the host machine.
\nIf you have project.cdn set you must move the public folder to the actual cdn.
\n\n💡 It is important that the .production folder is present for environment detection
\n
The host machine must have at least node v8.10.0 installed.
\nYou don't have to "npm install" in the host machine.
\n\n\n✨ You can configure the environment using
\nsettingsandsecrets
To start the server just run:
\nnode .production/server.js\n\n\n✨ It is recommend the usage of a process manager like PM2
\n
How to Deploy a static generated site with Nullstack
After you generate a static site, all you have to do is move the output folder to any host machine capable of serving HTML.
\nNext step
\n\n🎉 Congratulations. You are done with the advanced concepts!
\n
⚔ Learn how to use MongoDB with Nullstack.
\n","description":"With Nullstack it's easy to have your application up and running in production mode"},"n-0-0-13":{},"n-0-0-15":{},"n-0-0-16":{"locale":"en-US","i18n":{"nullachan":{"alt":"Nulla-Chan","title":"Nulla-Chan: Nullstack's official waifu"},"links":[{"title":"YouTube","href":"https://www.youtube.com/channel/UCUNPaxoppH3lu6JTrUX78Ww"},{"title":"Twitter","href":"https://twitter.com/nullstackapp"},{"title":"GitHub","href":"https://github.com/nullstack"}]}}}, "page": {"image":"/image-1200x630.png","status":200,"title":"How to Deploy - Nullstack","description":"With Nullstack it's easy to have your application up and running in production mode"}} \ No newline at end of file diff --git a/docs/how-to-use-facebook-pixel-with-nullstack.html b/docs/how-to-use-facebook-pixel-with-nullstack.html deleted file mode 100644 index 37a08447..00000000 --- a/docs/how-to-use-facebook-pixel-with-nullstack.html +++ /dev/null @@ -1,137 +0,0 @@ - - - - - -Facebook's Pixel
According to developers.facebook.com:
-"The Facebook pixel is a snippet of JavaScript code that allows you to track visitor activity on your website."
-You can take advantage of the context and custom events to create a component that dynamically sends Pixel events.
-Facebook's Pixel can only be called after hydrate to ensure it is running in the client.
import Nullstack from 'nullstack';
-
-class FacebookPixel extends Nullstack {
-
- async hydrate({page, id}) {
- ! function(f, b, e, v, n, t, s) {
- if (f.fbq) return;
- n = f.fbq = function() {
- n.callMethod ?
- n.callMethod.apply(n, arguments) : n.queue.push(arguments)
- };
- if (!f._fbq) f._fbq = n;
- n.push = n;
- n.loaded = !0;
- n.version = '2.0';
- n.queue = [];
- t = b.createElement(e);
- t.async = !0;
- t.src = v;
- s = b.getElementsByTagName(e)[0];
- s.parentNode.insertBefore(t, s)
- }(window, document, 'script',
- 'https://connect.facebook.net/en_US/fbevents.js');
- fbq('init', id);
- fbq('track', 'PageView');
- window.addEventListener(page.event, () => {
- fbq('init', id);
- fbq('track', 'PageView');
- })
- }
-}
-
-export default FacebookPixel;
-import Nullstack from 'nullstack';
-import FacebookPixel from './FacebookPixel';
-
-class Application extends Nullstack {
-
- // ...
-
- render() {
- return (
- <main>
- <FacebookPixel id="REPLACE_WITH_YOUR_FACEBOOK_PIXEL_ID" />
- </main>
- )
- }
-
-
-}
-
-export default Application;
-Using a Wrapper
Alternatively, you can install nullstack-facebook-pixel as a dependency:
-npm install nullstack-facebook-pixel
-import Nullstack from 'nullstack';
-import FacebookPixel from 'nullstack-facebook-pixel';
-
-class Application extends Nullstack {
-
- // ...
-
- render() {
- return (
- <main>
- <FacebookPixel id="REPLACE_WITH_YOUR_FACEBOOK_PIXEL_ID" />
- </main>
- )
- }
-
-
-}
-
-export default Application;
-Next step
--🎉 Congratulations. You are done with the documentation!
-
⚔ If you want to see this more examples please open an issue on github.
-Facebook's Pixel
According to developers.facebook.com:
-"The Facebook pixel is a snippet of JavaScript code that allows you to track visitor activity on your website."
-You can take advantage of the context and custom events to create a component that dynamically sends Pixel events.
-Facebook's Pixel can only be called after hydrate to ensure it is running in the client.
import Nullstack from 'nullstack';
-
-class FacebookPixel extends Nullstack {
-
- async hydrate({page, id}) {
- ! function(f, b, e, v, n, t, s) {
- if (f.fbq) return;
- n = f.fbq = function() {
- n.callMethod ?
- n.callMethod.apply(n, arguments) : n.queue.push(arguments)
- };
- if (!f._fbq) f._fbq = n;
- n.push = n;
- n.loaded = !0;
- n.version = '2.0';
- n.queue = [];
- t = b.createElement(e);
- t.async = !0;
- t.src = v;
- s = b.getElementsByTagName(e)[0];
- s.parentNode.insertBefore(t, s)
- }(window, document, 'script',
- 'https://connect.facebook.net/en_US/fbevents.js');
- fbq('init', id);
- fbq('track', 'PageView');
- window.addEventListener(page.event, () => {
- fbq('init', id);
- fbq('track', 'PageView');
- })
- }
-}
-
-export default FacebookPixel;
-import Nullstack from 'nullstack';
-import FacebookPixel from './FacebookPixel';
-
-class Application extends Nullstack {
-
- // ...
-
- render() {
- return (
- <main>
- <FacebookPixel id="REPLACE_WITH_YOUR_FACEBOOK_PIXEL_ID" />
- </main>
- )
- }
-
-
-}
-
-export default Application;
-Using a Wrapper
Alternatively, you can install nullstack-facebook-pixel as a dependency:
-npm install nullstack-facebook-pixel
-import Nullstack from 'nullstack';
-import FacebookPixel from 'nullstack-facebook-pixel';
-
-class Application extends Nullstack {
-
- // ...
-
- render() {
- return (
- <main>
- <FacebookPixel id="REPLACE_WITH_YOUR_FACEBOOK_PIXEL_ID" />
- </main>
- )
- }
-
-
-}
-
-export default Application;
-Next step
--🎉 Congratulations. You are done with the documentation!
-
⚔ If you want to see this more examples please open an issue on github.
-According to developers.facebook.com:
\n"The Facebook pixel is a snippet of JavaScript code that allows you to track visitor activity on your website."
\nYou can take advantage of the context and custom events to create a component that dynamically sends Pixel events.
\nFacebook's Pixel can only be called after hydrate to ensure it is running in the client.
import Nullstack from 'nullstack';\n\nclass FacebookPixel extends Nullstack {\n\n async hydrate({page, id}) {\n ! function(f, b, e, v, n, t, s) {\n if (f.fbq) return;\n n = f.fbq = function() {\n n.callMethod ?\n n.callMethod.apply(n, arguments) : n.queue.push(arguments)\n };\n if (!f._fbq) f._fbq = n;\n n.push = n;\n n.loaded = !0;\n n.version = '2.0';\n n.queue = [];\n t = b.createElement(e);\n t.async = !0;\n t.src = v;\n s = b.getElementsByTagName(e)[0];\n s.parentNode.insertBefore(t, s)\n }(window, document, 'script',\n 'https://connect.facebook.net/en_US/fbevents.js');\n fbq('init', id);\n fbq('track', 'PageView');\n window.addEventListener(page.event, () => {\n fbq('init', id);\n fbq('track', 'PageView');\n })\n }\n}\n\nexport default FacebookPixel;\nimport Nullstack from 'nullstack';\nimport FacebookPixel from './FacebookPixel';\n\nclass Application extends Nullstack {\n\n // ...\n\n render() {\n return (\n <main>\n <FacebookPixel id=\"REPLACE_WITH_YOUR_FACEBOOK_PIXEL_ID\" />\n </main>\n )\n }\n\n\n}\n\nexport default Application;\nUsing a Wrapper
Alternatively, you can install nullstack-facebook-pixel as a dependency:
\nnpm install nullstack-facebook-pixel\nimport Nullstack from 'nullstack';\nimport FacebookPixel from 'nullstack-facebook-pixel';\n\nclass Application extends Nullstack {\n\n // ...\n\n render() {\n return (\n <main>\n <FacebookPixel id=\"REPLACE_WITH_YOUR_FACEBOOK_PIXEL_ID\" />\n </main>\n )\n }\n\n\n}\n\nexport default Application;\nNext step
\n\n🎉 Congratulations. You are done with the documentation!
\n
⚔ If you want to see this more examples please open an issue on github.
\n","description":"Take advantage of the [context](/context) and [custom events](/context-page) to create a component that dynamically sends Pixel events"},"n-0-0-13":{},"n-0-0-15":{},"n-0-0-16":{"locale":"en-US","i18n":{"nullachan":{"alt":"Nulla-Chan","title":"Nulla-Chan: Nullstack's official waifu"},"links":[{"title":"YouTube","href":"https://www.youtube.com/channel/UCUNPaxoppH3lu6JTrUX78Ww"},{"title":"Twitter","href":"https://twitter.com/nullstackapp"},{"title":"GitHub","href":"https://github.com/nullstack"}]}}}, "page": {"image":"/image-1200x630.png","status":200,"title":"Facebook's Pixel - Nullstack","description":"Take advantage of the [context](/context) and [custom events](/context-page) to create a component that dynamically sends Pixel events"}} \ No newline at end of file diff --git a/docs/how-to-use-google-analytics-with-nullstack.html b/docs/how-to-use-google-analytics-with-nullstack.html deleted file mode 100644 index 9d692c4a..00000000 --- a/docs/how-to-use-google-analytics-with-nullstack.html +++ /dev/null @@ -1,135 +0,0 @@ - - - - - -Google Analytics
According to analytics.google.com:
-"Google Analytics lets you measure your advertising ROI as well as track your Flash, video, and social networking sites and applications."
-You can take advantage of the context and custom events to create a component that dynamically sends GTAG events.
-GTAG can only be called after hydrate to ensure it is running in the client.
import Nullstack from 'nullstack';
-
-class GoogleAnalytics extends Nullstack {
-
- hydrate({router, page, id}) {
- window.dataLayer = window.dataLayer || [];
- function gtag(){
- dataLayer.push(arguments);
- }
- gtag('js', new Date());
- gtag('config', id, {
- page_title: page.title,
- page_path: router.url
- });
- window.addEventListener(page.event, () => {
- gtag('event', 'page_view', {
- page_title: page.title,
- page_path: router.url
- })
- })
- }
-
- render({id}) {
- return (
- <script
- async
- src={`https://www.googletagmanager.com/gtag/js?id=${id}`}
- />
- )
- }
-
-}
-
-export default GoogleAnalytics;
-import Nullstack from 'nullstack';
-import GoogleAnalytics from './GoogleAnalytics';
-
-class Application extends Nullstack {
-
- // ...
-
- render() {
- return (
- <main>
- <GoogleAnalytics id="REPLACE_WITH_YOUR_GOOGLE_ANALYTICS_ID" />
- </main>
- )
- }
-
-
-}
-
-export default Application;
-Using a Wrapper
Alternatively, you can install nullstack-google-analytics as a dependency:
-npm install nullstack-google-analytics
-import Nullstack from 'nullstack';
-import GoogleAnalytics from 'nullstack-google-analytics';
-
-class Application extends Nullstack {
-
- // ...
-
- render() {
- return (
- <main>
- <GoogleAnalytics id="REPLACE_WITH_YOUR_GOOGLE_ANALYTICS_ID" />
- </main>
- )
- }
-
-
-}
-
-export default Application;
-Next step
-Google Analytics
According to analytics.google.com:
-"Google Analytics lets you measure your advertising ROI as well as track your Flash, video, and social networking sites and applications."
-You can take advantage of the context and custom events to create a component that dynamically sends GTAG events.
-GTAG can only be called after hydrate to ensure it is running in the client.
import Nullstack from 'nullstack';
-
-class GoogleAnalytics extends Nullstack {
-
- hydrate({router, page, id}) {
- window.dataLayer = window.dataLayer || [];
- function gtag(){
- dataLayer.push(arguments);
- }
- gtag('js', new Date());
- gtag('config', id, {
- page_title: page.title,
- page_path: router.url
- });
- window.addEventListener(page.event, () => {
- gtag('event', 'page_view', {
- page_title: page.title,
- page_path: router.url
- })
- })
- }
-
- render({id}) {
- return (
- <script
- async
- src={`https://www.googletagmanager.com/gtag/js?id=${id}`}
- />
- )
- }
-
-}
-
-export default GoogleAnalytics;
-import Nullstack from 'nullstack';
-import GoogleAnalytics from './GoogleAnalytics';
-
-class Application extends Nullstack {
-
- // ...
-
- render() {
- return (
- <main>
- <GoogleAnalytics id="REPLACE_WITH_YOUR_GOOGLE_ANALYTICS_ID" />
- </main>
- )
- }
-
-
-}
-
-export default Application;
-Using a Wrapper
Alternatively, you can install nullstack-google-analytics as a dependency:
-npm install nullstack-google-analytics
-import Nullstack from 'nullstack';
-import GoogleAnalytics from 'nullstack-google-analytics';
-
-class Application extends Nullstack {
-
- // ...
-
- render() {
- return (
- <main>
- <GoogleAnalytics id="REPLACE_WITH_YOUR_GOOGLE_ANALYTICS_ID" />
- </main>
- )
- }
-
-
-}
-
-export default Application;
-Next step
-According to analytics.google.com:
\n"Google Analytics lets you measure your advertising ROI as well as track your Flash, video, and social networking sites and applications."
\nYou can take advantage of the context and custom events to create a component that dynamically sends GTAG events.
\nGTAG can only be called after hydrate to ensure it is running in the client.
import Nullstack from 'nullstack';\n\nclass GoogleAnalytics extends Nullstack {\n\n hydrate({router, page, id}) {\n window.dataLayer = window.dataLayer || [];\n function gtag(){\n dataLayer.push(arguments);\n }\n gtag('js', new Date());\n gtag('config', id, {\n page_title: page.title,\n page_path: router.url\n });\n window.addEventListener(page.event, () => {\n gtag('event', 'page_view', {\n page_title: page.title,\n page_path: router.url\n })\n })\n }\n \n render({id}) {\n return (\n <script \n async\n src={`https://www.googletagmanager.com/gtag/js?id=${id}`}\n />\n )\n }\n\n}\n\nexport default GoogleAnalytics;\nimport Nullstack from 'nullstack';\nimport GoogleAnalytics from './GoogleAnalytics';\n\nclass Application extends Nullstack {\n\n // ...\n\n render() {\n return (\n <main>\n <GoogleAnalytics id=\"REPLACE_WITH_YOUR_GOOGLE_ANALYTICS_ID\" />\n </main>\n )\n }\n\n\n}\n\nexport default Application;\nUsing a Wrapper
Alternatively, you can install nullstack-google-analytics as a dependency:
\nnpm install nullstack-google-analytics\nimport Nullstack from 'nullstack';\nimport GoogleAnalytics from 'nullstack-google-analytics';\n\nclass Application extends Nullstack {\n\n // ...\n\n render() {\n return (\n <main>\n <GoogleAnalytics id=\"REPLACE_WITH_YOUR_GOOGLE_ANALYTICS_ID\" />\n </main>\n )\n }\n\n\n}\n\nexport default Application;\nNext step
⚔ Learn how to use Facebook Pixel with Nullstack.
\n","description":"Take advantage of the context and custom events to create a component that dynamically sends GTAG events"},"n-0-0-13":{},"n-0-0-15":{},"n-0-0-16":{"locale":"en-US","i18n":{"nullachan":{"alt":"Nulla-Chan","title":"Nulla-Chan: Nullstack's official waifu"},"links":[{"title":"YouTube","href":"https://www.youtube.com/channel/UCUNPaxoppH3lu6JTrUX78Ww"},{"title":"Twitter","href":"https://twitter.com/nullstackapp"},{"title":"GitHub","href":"https://github.com/nullstack"}]}}}, "page": {"image":"/image-1200x630.png","status":200,"title":"Google Analytics - Nullstack","description":"Take advantage of the context and custom events to create a component that dynamically sends GTAG events"}} \ No newline at end of file diff --git a/docs/how-to-use-mongodb-with-nullstack.html b/docs/how-to-use-mongodb-with-nullstack.html deleted file mode 100644 index 6d808877..00000000 --- a/docs/how-to-use-mongodb-with-nullstack.html +++ /dev/null @@ -1,105 +0,0 @@ - - - - - -How to use MongoDB
According to mongodb.com:
-"MongoDB is a general purpose, document-based, distributed database built for modern application developers and for the cloud era."
-You can use any database with Nullstack, but the javascript integration and flexibility of MongoDB looks especially good with Nullstack applications.
-Install the MongoDB driver from npm:
-npm install mongodb
-Configure the database credentials using secrets.
The last step is to simply assign the database connection to the server context.
-import Nullstack from 'nullstack';
-import {MongoClient} from 'mongodb';
-
-class Application extends Nullstack {
-
- static async start(context) {
- const {secrets} = context;
- secrets.development.databaseHost = 'mongodb://localhost:27017/dbname';
- secrets.databaseName = 'dbname';
- await this.startDatabase(context);
- }
-
- static async startDatabase(context) {
- const {secrets} = context;
- const databaseClient = new MongoClient(secrets.databaseHost);
- await databaseClient.connect();
- context.database = await databaseClient.db(secrets.databaseName);
- }
-
-}
-
-export default Application;
-The example above will make the database key available to all your server functions.
import Nullstack from 'nullstack';
-
-class BooksList extends Nullstack {
-
- books = [];
-
- static async getBooks({database}) {
- return await database.collection('books').find().toArray();
- }
-
- async initiate() {
- this.books = await this.getBooks();
- }
-
- // ...
-
-}
-
-export default BooksList;
-Next step
-How to use MongoDB
According to mongodb.com:
-"MongoDB is a general purpose, document-based, distributed database built for modern application developers and for the cloud era."
-You can use any database with Nullstack, but the javascript integration and flexibility of MongoDB looks especially good with Nullstack applications.
-Install the MongoDB driver from npm:
-npm install mongodb
-Configure the database credentials using secrets.
The last step is to simply assign the database connection to the server context.
-import Nullstack from 'nullstack';
-import {MongoClient} from 'mongodb';
-
-class Application extends Nullstack {
-
- static async start(context) {
- const {secrets} = context;
- secrets.development.databaseHost = 'mongodb://localhost:27017/dbname';
- secrets.databaseName = 'dbname';
- await this.startDatabase(context);
- }
-
- static async startDatabase(context) {
- const {secrets} = context;
- const databaseClient = new MongoClient(secrets.databaseHost);
- await databaseClient.connect();
- context.database = await databaseClient.db(secrets.databaseName);
- }
-
-}
-
-export default Application;
-The example above will make the database key available to all your server functions.
import Nullstack from 'nullstack';
-
-class BooksList extends Nullstack {
-
- books = [];
-
- static async getBooks({database}) {
- return await database.collection('books').find().toArray();
- }
-
- async initiate() {
- this.books = await this.getBooks();
- }
-
- // ...
-
-}
-
-export default BooksList;
-Next step
-According to mongodb.com:
\n"MongoDB is a general purpose, document-based, distributed database built for modern application developers and for the cloud era."
\nYou can use any database with Nullstack, but the javascript integration and flexibility of MongoDB looks especially good with Nullstack applications.
\nInstall the MongoDB driver from npm:
\nnpm install mongodb\nConfigure the database credentials using secrets.
The last step is to simply assign the database connection to the server context.
\nimport Nullstack from 'nullstack';\nimport {MongoClient} from 'mongodb';\n\nclass Application extends Nullstack {\n\n static async start(context) {\n const {secrets} = context;\n secrets.development.databaseHost = 'mongodb://localhost:27017/dbname';\n secrets.databaseName = 'dbname';\n await this.startDatabase(context);\n }\n\n static async startDatabase(context) {\n const {secrets} = context;\n const databaseClient = new MongoClient(secrets.databaseHost);\n await databaseClient.connect();\n context.database = await databaseClient.db(secrets.databaseName);\n }\n\n}\n\nexport default Application;\nThe example above will make the database key available to all your server functions.
import Nullstack from 'nullstack';\n\nclass BooksList extends Nullstack {\n\n books = [];\n\n static async getBooks({database}) {\n return await database.collection('books').find().toArray();\n }\n\n async initiate() {\n this.books = await this.getBooks();\n }\n\n // ...\n\n}\n\nexport default BooksList;\nNext step
⚔ Learn how to use Google Analytics with Nullstack.
\n","description":"You can use any database with Nullstack, but the javascript integration and flexibility of MongoDB looks especially good with Nullstack applications"},"n-0-0-13":{},"n-0-0-15":{},"n-0-0-16":{"locale":"en-US","i18n":{"nullachan":{"alt":"Nulla-Chan","title":"Nulla-Chan: Nullstack's official waifu"},"links":[{"title":"YouTube","href":"https://www.youtube.com/channel/UCUNPaxoppH3lu6JTrUX78Ww"},{"title":"Twitter","href":"https://twitter.com/nullstackapp"},{"title":"GitHub","href":"https://github.com/nullstack"}]}}}, "page": {"image":"/image-1200x630.png","status":200,"title":"How to use MongoDB - Nullstack","description":"You can use any database with Nullstack, but the javascript integration and flexibility of MongoDB looks especially good with Nullstack applications"}} \ No newline at end of file diff --git a/docs/icon-128x128.png b/docs/icon-128x128.png deleted file mode 100644 index e96fe8b5..00000000 Binary files a/docs/icon-128x128.png and /dev/null differ diff --git a/docs/icon-144x144.png b/docs/icon-144x144.png deleted file mode 100644 index a87f2a70..00000000 Binary files a/docs/icon-144x144.png and /dev/null differ diff --git a/docs/icon-152x152.png b/docs/icon-152x152.png deleted file mode 100644 index 10b23e29..00000000 Binary files a/docs/icon-152x152.png and /dev/null differ diff --git a/docs/icon-180x180.png b/docs/icon-180x180.png deleted file mode 100644 index 252b3a4f..00000000 Binary files a/docs/icon-180x180.png and /dev/null differ diff --git a/docs/icon-192x192.png b/docs/icon-192x192.png deleted file mode 100644 index 450ca4ca..00000000 Binary files a/docs/icon-192x192.png and /dev/null differ diff --git a/docs/icon-384x384.png b/docs/icon-384x384.png deleted file mode 100644 index c50c7037..00000000 Binary files a/docs/icon-384x384.png and /dev/null differ diff --git a/docs/icon-512x512.png b/docs/icon-512x512.png deleted file mode 100644 index db7461c0..00000000 Binary files a/docs/icon-512x512.png and /dev/null differ diff --git a/docs/icon-72x72.png b/docs/icon-72x72.png deleted file mode 100644 index 58aaf4cd..00000000 Binary files a/docs/icon-72x72.png and /dev/null differ diff --git a/docs/icon-96x96.png b/docs/icon-96x96.png deleted file mode 100644 index a6dd92a8..00000000 Binary files a/docs/icon-96x96.png and /dev/null differ diff --git a/docs/image-1200x630.png b/docs/image-1200x630.png deleted file mode 100644 index 03da34b6..00000000 Binary files a/docs/image-1200x630.png and /dev/null differ diff --git a/docs/index.html b/docs/index.html deleted file mode 100644 index c718e73d..00000000 --- a/docs/index.html +++ /dev/null @@ -1,258 +0,0 @@ - - - - - -Full-stack Javascript Components
for one-dev armies
Nullstack is a full-stack framework for building progressive web applications.
It connects a stateful UI layer to specialized microservices in the same component using vanilla javascript.
Focus on solving your business logic instead of writing glue code.
Server-Side Rendering
Nullstack generates SEO ready HTML optimized for the first paint of your route in a single request using local functions with zero javascript dependencies in the client bundle.
Single Page Application
After hydration, requests will fetch JSON from an automatically generated API off server functions, update the application state, and rerender the page.
Static Site Generation
You can even use Nullstack to generate lightning-fast static websites that serve HTML and become a single page application using an automatically generated static API .
Complete Features as Components
Nullstack is not another part of your stack, it is your stack
Your application can be exported from back-end to front-end as a component and mounted into another application
import Nullstack from 'nullstack';
-
-class ProductList extends Nullstack {
-
- products = [];
-
- static async getProducts({ database }) {
- const [products] = await database.query(
- 'SELECT * FROM products'
- );
- return products;
- }
-
- async initiate() {
- this.products = await this.getProducts();
- }
-
- static async deleteProduct({ database, id }) {
- await database.query(
- 'DELETE FROM products WHERE id=?',
- [id]
- );
- }
-
- async remove({ id }) {
- await this.deleteProduct({ id });
- await this.initiate();
- }
-
- renderProduct({ id, name }) {
- return (
- <li>
- <button onclick={this.remove} id={id}>
- {name}
- </button>
- </li>
- )
- }
-
- render() {
- return (
- <ul>
- {this.products.map((product) => (
- <Product {...product} />
- ))}
- </ul>
- )
- }
-
-}
-
-export default ProductList;import Nullstack from 'nullstack';
-
-class ProductForm extends Nullstack {
-
- name = '';
- price = 0;
-
- static async getProductById({ database, id }) {
- const [products] = await database.query(
- 'SELECT * FROM products WHERE id=? LIMIT 1',
- [id]
- );
- return products[0];
- }
-
- async initiate({ params }) {
- const product = await this.getProductById({
- id: params.id
- });
- this.name = product.name;
- this.price = product.price;
- }
-
- static async updateProduct({ database, name, price, id }) {
- await database.query(
- 'UPDATE products SET name=?, price=? WHERE id=?',
- [name, price, id]
- );
- }
-
- async submit({ router, params }) {
- await this.updateProduct({
- id: params.id,
- name: this.name,
- price: this.price
- });
- router.url = '/products';
- }
-
- render() {
- return (
- <form onsubmit={this.submit}>
- <input class="form-control" bind={this.name} />
- <input type="number" step=".01" bind={this.price} />
- <button>Submit</button>
- </form>
- )
- }
-
-}
-
-export default ProductForm;The example above is the complete code of a product list and edit form without hiding a single line.
Both components invoke server functions to access a MySQL database inside JavaScript without you having to think about APIs
Productivity is in the Details
Nullstack features have been extracted from real life projects with convenience and consistency in mind
import Nullstack from 'nullstack';
-
-class Controlled extends Nullstack {
-
- count = 0;
-
- increment({delta}) {
- this.count += delta;
- }
-
- render() {
- return (
- <div>
- <button onclick={this.increment} delta={-1}>
- {this.count}
- </button>
- <span> {this.count} </span>
- <button onclick={this.increment} delta={1}>
- {this.count}
- </button>
- </div>
- )
- }
-
-}
-
-export default Controlled;import Nullstack from 'nullstack';
-
-class Binding extends Nullstack {
-
- number = 1;
- boolean = true;
-
- object = {number: 1};
- array = ['a', 'b', 'c'];
-
- render({params}) {
- return (
- <form>
- <input bind={this.number} />
- <input bind={this.boolean} type="checkbox" />
- <input bind={this.object.number} />
- {this.array.map((value, index) => (
- <input bind={this.array[index]} />
- ))}
- <input bind={params.page} />
- </form>
- )
- }
-
-}
-
-export default Binding;import Nullstack from 'nullstack';
-
-class Routes extends Nullstack {
-
- renderPost({params}) {
- return (
- <div>
- <div route="/post/getting-started">
- npx create-nullstack-app name
- </div>
- <div route="*"> {params.slug} </div>
- </div>
- )
- }
-
- render() {
- return (
- <div>
- <Post route="/post/:slug" />
- <a href="/post/hello-world"> Welcome </a>
- </div>
- )
- }
-
-}
-
-export default Routes;import Nullstack from 'nullstack';
-
-class Lifecycle extends Nullstack {
-
- prepare({environment}) {
- const {server, client} = environment;
- }
-
- async initiate({environment}) {
- const {server, client} = environment;
- }
-
- async hydrate({environment}) {
- const {client} = environment;
- }
-
- async update({environment}) {
- const {client} = environment;
- }
-
- async terminate({environment}) {
- const {client} = environment;
- }
-
-}
-
-export default Lifecycle;Watch our Nullstack video tutorials
Nullstack cares about making its content as direct to the point and easy to understand as possible
Why should you use Nullstack?
Scalable Development
Every project starts small and becomes complex over time. Scale as you go, no matter the size of the team.
No compromises, no enforcements.Feature-driven Development
Development of both back and front ends of a feature in the same component in an organized way with ease of overview.
True componentization and code reusability.Already existing ecosystem
Takes advantage of any isomorphic vanilla Javascript package made throughout history.
All of your application speaks the same language.Quickly adapt to scope changes
The horizontal structure, as opposed to a hierarchical one, makes it a lot easier to move resources around.
Flexibility over bureaucracy.Instance Self
-
-
- Type:
object
- - Origin: Nullstack Context -
- Availability: client -
- readonly in client context -
It gives you information about the instance lifecycle and it's unique key.
Each instance receives its own self object.
The following keys are available in the object:
--
-
key:string
-
When a lifecycle method is resolved, even if not declared, an equivalent key is set to true in self.
If the component was server-side rendered the prerendered key will remain true until it is terminated.
The element key points to the DOM selector and is only guaranteed to exist when hydrate is being called since prepare and initiate could run in the server.
--💡 Do not use
-elementto guess the environment, instead use theenvironmentfor that.
Observing self is a nice way to avoid giving placeholder information to the end-user.
import Nullstack from 'nullstack';
-
-class Page extends Nullstack {
-
- // ...
-
- async initiate() {
- this.price = await this.getPrice();
- }
-
- async hydrate({self}) {
- self.element.querySelector('input').focus();
- }
-
- render({self}) {
- if(!self.prerendered && !self.initiated) return false;
- return (
- <form>
- <input type="number" bind={this.price} />
- <button disabled={!self.hydrated}>
- Save
- </button>
- </form>
- )
- }
-
-}
-
-export default Page;
---💡 Components that get optimized into functional components have no access to
-self.
Instance Key
-
-
- Type:
string
- - Origin: Component Context -
- Availability: client -
- readonly in client context or after defined it's value as attribute -
It allows you to persist the instance when it moves in the dom.
-You can declare one key per instance.
--💡 If you do not declare a
-keynullstack will generate one based on dom depth.
--🔥 Keys cannot start with "_." to avoid conflicts with Nullstack generated keys
-
Keys must be globally unique since the component could move anywhere around the dom and not only between its siblings.
-Preserving state
Keys are useful to preserve state in stateful components when you move them in the dom.
-This is especially useful for dynamically sized lists that invoke components.
-import Nullstack from 'nullstack';
-import Item from './Item';
-
-class List extends Nullstack {
-
- // ...
-
- async initiate() {
- this.items = await this.getItems();
- }
-
- render({self}) {
- const componentKey = self.key;
- return (
- <ul>
- {this.items.map((item) => (
- <Item key={`${componentKey}-${item.id}`} {...item} />
- ))}
- </ul>
- )
- }
-
-}
-
-export default Page;
-Shared Instances
You can also use keys to share the instance between two elements.
-Only the first encounter of the key will run its lifecycle.
import Nullstack from 'nullstack';
-
-class Counter extends Nullstack {
-
- count = 0;
-
- render({amount}) {
- return (
- <div>
- <button onclick={{count: this.count+1}}>
- {this.count} x {amount} = {this.count * amount}
- </button>
- </div>
- )
- }
-
-}
-
-export default Counter;
-import Nullstack from 'nullstack';
-import Counter from './Counter';
-
-class Application extends Nullstack {
-
- render() {
- return (
- <main>
- <Counter key="a" amount={1} />
- <Counter key="b" amount={2} />
- <Counter key="b" amount={3} />
- </main>
- )
- }
-
-}
-
-export default Application;
-Instance Key
-
-
- Type:
string
- - Origin: Component Context -
- Availability: client -
- readonly in client context or after defined it's value as attribute -
It allows you to persist the instance when it moves in the dom.
-You can declare one key per instance.
---💡 If you do not declare a key nullstack will generate one based on dom depth.
-
--🔥 Keys cannot start with "_." to avoid conflicts with Nullstack generated keys
-
Keys must be globally unique since the component could move anywhere around the dom and not only between its siblings.
-Preserving state
Keys are useful to preserve state in stateful components when you move them in the dom.
-This is especially useful for dynamically sized lists that invoke components.
-import Nullstack from 'nullstack';
-import Item from './Item';
-
-class List extends Nullstack {
-
- // ...
-
- async initiate() {
- this.items = await this.getItems();
- }
-
- render({self}) {
- const componentKey = self.key;
- return (
- <ul>
- {this.items.map((item) => (
- <Item key={`${componentKey}-${item.id}`} {...item} />
- ))}
- </ul>
- )
- }
-
-}
-
-export default Page;
-Shared Instances
You can also use keys to share the instance between two elements.
-Only the first encounter of the key will run its lifecycle
-import Nullstack from 'nullstack';
-
-class Counter extends Nullstack {
-
- count = 0;
-
- render({amount}) {
- return (
- <div>
- <button onclick={{count: this.count+1}}>
- {this.count} x {amount} = {this.count * amount}
- </button>
- </div>
- )
- }
-
-}
-
-export default Counter;
-import Nullstack from 'nullstack';
-import Counter from './Counter';
-
-class Application extends Nullstack {
-
- render() {
- return (
- <main>
- <Counter key="a" amount={1} />
- <Counter key="b" amount={2} />
- <Counter key="b" amount={3} />
- </main>
- )
- }
-
-}
-
-export default Application;
-Next step
⚔ Learn about the server request and response.
-Instance Self
-
-
- Type:
object
- - Origin: Nullstack Context -
- Availability: client -
- readonly in client context -
It gives you information about the instance lifecycle and it's unique key.
Each instance receives its own self object.
The following keys are available in the object:
--
-
key:string
-
When a lifecycle method is resolved, even if not declared, an equivalent key is set to true in self.
If the component was server-side rendered the prerendered key will remain true until it is terminated.
The element key points to the DOM selector and is only guaranteed to exist when hydrate is being called since prepare and initiate could run in the server.
--💡 Do not use
-elementto guess the environment, instead use theenvironmentfor that.
Observing self is a nice way to avoid giving placeholder information to the end-user.
import Nullstack from 'nullstack';
-
-class Page extends Nullstack {
-
- // ...
-
- async initiate() {
- this.price = await this.getPrice();
- }
-
- async hydrate({self}) {
- self.element.querySelector('input').focus();
- }
-
- render({self}) {
- if(!self.prerendered && !self.initiated) return false;
- return (
- <form>
- <input type="number" bind={this.price} />
- <button disabled={!self.hydrated}>
- Save
- </button>
- </form>
- )
- }
-
-}
-
-export default Page;
---💡 Components that get optimized into functional components have no access to
-self.
Instance Key
-
-
- Type:
string
- - Origin: Component Context -
- Availability: client -
- readonly in client context or after defined it's value as attribute -
It allows you to persist the instance when it moves in the dom.
-You can declare one key per instance.
--💡 If you do not declare a
-keynullstack will generate one based on dom depth.
--🔥 Keys cannot start with "_." to avoid conflicts with Nullstack generated keys
-
Keys must be globally unique since the component could move anywhere around the dom and not only between its siblings.
-Preserving state
Keys are useful to preserve state in stateful components when you move them in the dom.
-This is especially useful for dynamically sized lists that invoke components.
-import Nullstack from 'nullstack';
-import Item from './Item';
-
-class List extends Nullstack {
-
- // ...
-
- async initiate() {
- this.items = await this.getItems();
- }
-
- render({self}) {
- const componentKey = self.key;
- return (
- <ul>
- {this.items.map((item) => (
- <Item key={`${componentKey}-${item.id}`} {...item} />
- ))}
- </ul>
- )
- }
-
-}
-
-export default Page;
-Shared Instances
You can also use keys to share the instance between two elements.
-Only the first encounter of the key will run its lifecycle.
import Nullstack from 'nullstack';
-
-class Counter extends Nullstack {
-
- count = 0;
-
- render({amount}) {
- return (
- <div>
- <button onclick={{count: this.count+1}}>
- {this.count} x {amount} = {this.count * amount}
- </button>
- </div>
- )
- }
-
-}
-
-export default Counter;
-import Nullstack from 'nullstack';
-import Counter from './Counter';
-
-class Application extends Nullstack {
-
- render() {
- return (
- <main>
- <Counter key="a" amount={1} />
- <Counter key="b" amount={2} />
- <Counter key="b" amount={3} />
- </main>
- )
- }
-
-}
-
-export default Application;
-Instance Key
-
-
- Type:
string
- - Origin: Component Context -
- Availability: client -
- readonly in client context or after defined it's value as attribute -
It allows you to persist the instance when it moves in the dom.
-You can declare one key per instance.
---💡 If you do not declare a key nullstack will generate one based on dom depth.
-
--🔥 Keys cannot start with "_." to avoid conflicts with Nullstack generated keys
-
Keys must be globally unique since the component could move anywhere around the dom and not only between its siblings.
-Preserving state
Keys are useful to preserve state in stateful components when you move them in the dom.
-This is especially useful for dynamically sized lists that invoke components.
-import Nullstack from 'nullstack';
-import Item from './Item';
-
-class List extends Nullstack {
-
- // ...
-
- async initiate() {
- this.items = await this.getItems();
- }
-
- render({self}) {
- const componentKey = self.key;
- return (
- <ul>
- {this.items.map((item) => (
- <Item key={`${componentKey}-${item.id}`} {...item} />
- ))}
- </ul>
- )
- }
-
-}
-
-export default Page;
-Shared Instances
You can also use keys to share the instance between two elements.
-Only the first encounter of the key will run its lifecycle
-import Nullstack from 'nullstack';
-
-class Counter extends Nullstack {
-
- count = 0;
-
- render({amount}) {
- return (
- <div>
- <button onclick={{count: this.count+1}}>
- {this.count} x {amount} = {this.count * amount}
- </button>
- </div>
- )
- }
-
-}
-
-export default Counter;
-import Nullstack from 'nullstack';
-import Counter from './Counter';
-
-class Application extends Nullstack {
-
- render() {
- return (
- <main>
- <Counter key="a" amount={1} />
- <Counter key="b" amount={2} />
- <Counter key="b" amount={3} />
- </main>
- )
- }
-
-}
-
-export default Application;
-Next step
⚔ Learn about the server request and response.
-- \n
- Type:
object\n - Origin: Nullstack Context \n
- Availability: client \n
- readonly in client context \n
It gives you information about the instance lifecycle and it's unique key.
Each instance receives its own self object.
The following keys are available in the object:
\n- \n
key:string\n
When a lifecycle method is resolved, even if not declared, an equivalent key is set to true in self.
If the component was server-side rendered the prerendered key will remain true until it is terminated.
The element key points to the DOM selector and is only guaranteed to exist when hydrate is being called since prepare and initiate could run in the server.
\n\n💡 Do not use
\nelementto guess the environment, instead use theenvironmentfor that.
Observing self is a nice way to avoid giving placeholder information to the end-user.
import Nullstack from 'nullstack';\n\nclass Page extends Nullstack {\n\n // ...\n\n async initiate() {\n this.price = await this.getPrice();\n }\n\n async hydrate({self}) {\n self.element.querySelector('input').focus();\n }\n \n render({self}) {\n if(!self.prerendered && !self.initiated) return false;\n return (\n <form> \n <input type=\"number\" bind={this.price} />\n <button disabled={!self.hydrated}> \n Save\n </button>\n </form>\n )\n }\n\n}\n\nexport default Page;\n\n\n💡 Components that get optimized into functional components have no access to
\nself.
Instance Key
- \n
- Type:
string\n - Origin: Component Context \n
- Availability: client \n
- readonly in client context or after defined it's value as attribute \n
It allows you to persist the instance when it moves in the dom.
\nYou can declare one key per instance.
\n\n💡 If you do not declare a
\nkeynullstack will generate one based on dom depth.
\n\n🔥 Keys cannot start with "_." to avoid conflicts with Nullstack generated keys
\n
Keys must be globally unique since the component could move anywhere around the dom and not only between its siblings.
\nPreserving state
Keys are useful to preserve state in stateful components when you move them in the dom.
\nThis is especially useful for dynamically sized lists that invoke components.
\nimport Nullstack from 'nullstack';\nimport Item from './Item';\n\nclass List extends Nullstack {\n\n // ...\n\n async initiate() {\n this.items = await this.getItems();\n }\n \n render({self}) {\n const componentKey = self.key;\n return (\n <ul> \n {this.items.map((item) => (\n <Item key={`${componentKey}-${item.id}`} {...item} />\n ))}\n </ul>\n )\n }\n\n}\n\nexport default Page;\nShared Instances
You can also use keys to share the instance between two elements.
\nOnly the first encounter of the key will run its lifecycle.
import Nullstack from 'nullstack';\n\nclass Counter extends Nullstack {\n\n count = 0;\n\n render({amount}) {\n return (\n <div>\n <button onclick={{count: this.count+1}}>\n {this.count} x {amount} = {this.count * amount}\n </button> \n </div>\n )\n }\n\n}\n\nexport default Counter;\nimport Nullstack from 'nullstack';\nimport Counter from './Counter';\n\nclass Application extends Nullstack {\n\n render() {\n return (\n <main>\n <Counter key=\"a\" amount={1} />\n <Counter key=\"b\" amount={2} />\n <Counter key=\"b\" amount={3} />\n </main>\n )\n }\n\n}\n\nexport default Application;\nInstance Key
- \n
- Type:
string\n - Origin: Component Context \n
- Availability: client \n
- readonly in client context or after defined it's value as attribute \n
It allows you to persist the instance when it moves in the dom.
\nYou can declare one key per instance.
\n\n\n💡 If you do not declare a key nullstack will generate one based on dom depth.
\n
\n\n🔥 Keys cannot start with "_." to avoid conflicts with Nullstack generated keys
\n
Keys must be globally unique since the component could move anywhere around the dom and not only between its siblings.
\nPreserving state
Keys are useful to preserve state in stateful components when you move them in the dom.
\nThis is especially useful for dynamically sized lists that invoke components.
\nimport Nullstack from 'nullstack';\nimport Item from './Item';\n\nclass List extends Nullstack {\n\n // ...\n\n async initiate() {\n this.items = await this.getItems();\n }\n \n render({self}) {\n const componentKey = self.key;\n return (\n <ul> \n {this.items.map((item) => (\n <Item key={`${componentKey}-${item.id}`} {...item} />\n ))}\n </ul>\n )\n }\n\n}\n\nexport default Page;\nShared Instances
You can also use keys to share the instance between two elements.
\nOnly the first encounter of the key will run its lifecycle
\nimport Nullstack from 'nullstack';\n\nclass Counter extends Nullstack {\n\n count = 0;\n\n render({amount}) {\n return (\n <div>\n <button onclick={{count: this.count+1}}>\n {this.count} x {amount} = {this.count * amount}\n </button> \n </div>\n )\n }\n\n}\n\nexport default Counter;\nimport Nullstack from 'nullstack';\nimport Counter from './Counter';\n\nclass Application extends Nullstack {\n\n render() {\n return (\n <main>\n <Counter key=\"a\" amount={1} />\n <Counter key=\"b\" amount={2} />\n <Counter key=\"b\" amount={3} />\n </main>\n )\n }\n\n}\n\nexport default Application;\nNext step
⚔ Learn about the server request and response.
\n","description":"The self object is a proxy in the Nullstack Context available in client and gives you information about the instance lifecycle"},"n-0-0-13":{},"n-0-0-15":{},"n-0-0-16":{"locale":"en-US","i18n":{"nullachan":{"alt":"Nulla-Chan","title":"Nulla-Chan: Nullstack's official waifu"},"links":[{"title":"YouTube","href":"https://www.youtube.com/channel/UCUNPaxoppH3lu6JTrUX78Ww"},{"title":"Twitter","href":"https://twitter.com/nullstackapp"},{"title":"GitHub","href":"https://github.com/nullstack"}]}}}, "page": {"image":"/image-1200x630.png","status":200,"title":"Instance Self - Nullstack","description":"The self object is a proxy in the Nullstack Context available in client and gives you information about the instance lifecycle"}} \ No newline at end of file diff --git a/docs/manifest-9cdb5778f42a90a83e1427c9316c97d3.json b/docs/manifest-9cdb5778f42a90a83e1427c9316c97d3.json deleted file mode 100644 index 3b29c313..00000000 --- a/docs/manifest-9cdb5778f42a90a83e1427c9316c97d3.json +++ /dev/null @@ -1 +0,0 @@ -{"name":"Nullstack","short_name":"Nullstack","theme_color":"#d22365","background_color":"#2d3748","display":"standalone","orientation":"portrait","scope":"/","start_url":"/","icons":[{"src":"/icon-72x72.png","sizes":"72x72","type":"image/png","purpose":"maskable any"},{"src":"/icon-96x96.png","sizes":"96x96","type":"image/png","purpose":"maskable any"},{"src":"/icon-128x128.png","sizes":"128x128","type":"image/png","purpose":"maskable any"},{"src":"/icon-144x144.png","sizes":"144x144","type":"image/png","purpose":"maskable any"},{"src":"/icon-152x152.png","sizes":"152x152","type":"image/png","purpose":"maskable any"},{"src":"/icon-180x180.png","sizes":"180x180","type":"image/png","purpose":"maskable any"},{"src":"/icon-192x192.png","sizes":"192x192","type":"image/png","purpose":"maskable any"},{"src":"/icon-384x384.png","sizes":"384x384","type":"image/png","purpose":"maskable any"},{"src":"/icon-512x512.png","sizes":"512x512","type":"image/png","purpose":"maskable any"}],"splash_pages":null} \ No newline at end of file diff --git a/docs/njs-file-extension.html b/docs/njs-file-extension.html deleted file mode 100644 index 8bbeecd6..00000000 --- a/docs/njs-file-extension.html +++ /dev/null @@ -1,153 +0,0 @@ - - - - - -NJS File Extension
Nullstack Javascript files let Webpack know which loaders to use at transpile time.
-NJS files must import Nullstack or one of its subclasses.
-If only a subclass is imported, a Nullstack import will be injected at transpile time.
-At transpile time JSX tags will be replaced with Nullstack.element.
This extension also allows Nullstack to make free transpile time optimizations like source injection.
---🔥 Each file must have only one class declaration.
-
-
-
- On the server bundle static async functions are mapped into a registry for security. -
- On the client bundle static async functions are removed and replaced with a invoke method. -
- On the client bundle static async functions with the name starting with "start" (and optionally followed by an uppercase letter) are completely removed. -
- On both server and client bundles, a hash with the md5 of the original source code is added to the class. -
--🐱💻 Bellow an example of a original .njs file.
-
import List from './List';
-import {readFileSync} from 'fs';
-
-class Tasks extends List {
-
- static async getTasks({limit}) {
- const json = readFileSync('tasks.json', 'utf-8');
- return JSON.parse(json).tasks.slice(0, limit);
- }
-
- prepare(context) {
- context.tasks = [];
- }
-
- async initiate(context) {
- context.tasks = await this.getTasks({limit: 10});
- }
-
- renderTask({task}) {
- return (
- <li>
- <input bind={task.description} />
- </li>
- )
- }
-
- render() {
- return (
- <main>
- <ul>
- {tasks.map((task) => <Task task={task} />)}
- </ul>
- </main>
- )
- }
-
-}
-
-export default Tasks;
---🐱💻 Bellow an example of the same transpiled .njs file.
-
import Nullstack from 'nullstack';
-import List from './List';
-
-class Tasks extends List {
-
- static hash = 'd493ac09d0d57574a30f136d31da455f';
-
- static getTasks = Nullstack.invoke('getTasks', 'd493ac09d0d57574a30f136d31da455f');
-
- prepare(context) {
- context.tasks = [];
- }
-
- async initiate(context) {
- context.tasks = await this.getTasks({limit: 10});
- }
-
- renderTask({task}) {
- return (
- <li>
- <input source={task} bind="description" />
- </li>
- )
- }
-
- render() {
- const Task = this.renderTask;
- return (
- <main>
- <ul>
- {tasks.map((task) => <Task task={task} />)}
- </ul>
- </main>
- )
- }
-
-}
-
-export default Tasks;
-Next step
⚔ Learn about server-side rendering.
-NJS File Extension
Nullstack Javascript files let Webpack know which loaders to use at transpile time.
-NJS files must import Nullstack or one of its subclasses.
-If only a subclass is imported, a Nullstack import will be injected at transpile time.
-At transpile time JSX tags will be replaced with Nullstack.element.
This extension also allows Nullstack to make free transpile time optimizations like source injection.
---🔥 Each file must have only one class declaration.
-
-
-
- On the server bundle static async functions are mapped into a registry for security. -
- On the client bundle static async functions are removed and replaced with a invoke method. -
- On the client bundle static async functions with the name starting with "start" (and optionally followed by an uppercase letter) are completely removed. -
- On both server and client bundles, a hash with the md5 of the original source code is added to the class. -
--🐱💻 Bellow an example of a original .njs file.
-
import List from './List';
-import {readFileSync} from 'fs';
-
-class Tasks extends List {
-
- static async getTasks({limit}) {
- const json = readFileSync('tasks.json', 'utf-8');
- return JSON.parse(json).tasks.slice(0, limit);
- }
-
- prepare(context) {
- context.tasks = [];
- }
-
- async initiate(context) {
- context.tasks = await this.getTasks({limit: 10});
- }
-
- renderTask({task}) {
- return (
- <li>
- <input bind={task.description} />
- </li>
- )
- }
-
- render() {
- return (
- <main>
- <ul>
- {tasks.map((task) => <Task task={task} />)}
- </ul>
- </main>
- )
- }
-
-}
-
-export default Tasks;
---🐱💻 Bellow an example of the same transpiled .njs file.
-
import Nullstack from 'nullstack';
-import List from './List';
-
-class Tasks extends List {
-
- static hash = 'd493ac09d0d57574a30f136d31da455f';
-
- static getTasks = Nullstack.invoke('getTasks', 'd493ac09d0d57574a30f136d31da455f');
-
- prepare(context) {
- context.tasks = [];
- }
-
- async initiate(context) {
- context.tasks = await this.getTasks({limit: 10});
- }
-
- renderTask({task}) {
- return (
- <li>
- <input source={task} bind="description" />
- </li>
- )
- }
-
- render() {
- const Task = this.renderTask;
- return (
- <main>
- <ul>
- {tasks.map((task) => <Task task={task} />)}
- </ul>
- </main>
- )
- }
-
-}
-
-export default Tasks;
-Next step
⚔ Learn about server-side rendering.
-Nullstack Javascript files let Webpack know which loaders to use at transpile time.
\nNJS files must import Nullstack or one of its subclasses.
\nIf only a subclass is imported, a Nullstack import will be injected at transpile time.
\nAt transpile time JSX tags will be replaced with Nullstack.element.
This extension also allows Nullstack to make free transpile time optimizations like source injection.
\n\n\n🔥 Each file must have only one class declaration.
\n
- \n
- On the server bundle static async functions are mapped into a registry for security. \n
- On the client bundle static async functions are removed and replaced with a invoke method. \n
- On the client bundle static async functions with the name starting with "start" (and optionally followed by an uppercase letter) are completely removed. \n
- On both server and client bundles, a hash with the md5 of the original source code is added to the class. \n
\n\n🐱💻 Bellow an example of a original .njs file.
\n
import List from './List';\nimport {readFileSync} from 'fs';\n\nclass Tasks extends List {\n\n static async getTasks({limit}) {\n const json = readFileSync('tasks.json', 'utf-8');\n return JSON.parse(json).tasks.slice(0, limit);\n }\n\n prepare(context) {\n context.tasks = [];\n }\n\n async initiate(context) {\n context.tasks = await this.getTasks({limit: 10});\n }\n\n renderTask({task}) {\n return (\n <li> \n <input bind={task.description} />\n </li>\n )\n }\n\n render() {\n return (\n <main>\n <ul>\n {tasks.map((task) => <Task task={task} />)}\n </ul>\n </main>\n )\n }\n\n}\n\nexport default Tasks;\n\n\n🐱💻 Bellow an example of the same transpiled .njs file.
\n
import Nullstack from 'nullstack';\nimport List from './List';\n\nclass Tasks extends List {\n\n static hash = 'd493ac09d0d57574a30f136d31da455f';\n\n static getTasks = Nullstack.invoke('getTasks', 'd493ac09d0d57574a30f136d31da455f');\n\n prepare(context) {\n context.tasks = [];\n }\n\n async initiate(context) {\n context.tasks = await this.getTasks({limit: 10});\n }\n\n renderTask({task}) {\n return (\n <li> \n <input source={task} bind=\"description\" />\n </li>\n )\n }\n\n render() {\n const Task = this.renderTask;\n return (\n <main>\n <ul>\n {tasks.map((task) => <Task task={task} />)}\n </ul>\n </main>\n )\n }\n\n}\n\nexport default Tasks;\nNext step
⚔ Learn about server-side rendering.
\n","description":"Nullstack Javascript files let Webpack know which loaders to use at transpile time"},"n-0-0-13":{},"n-0-0-15":{},"n-0-0-16":{"locale":"en-US","i18n":{"nullachan":{"alt":"Nulla-Chan","title":"Nulla-Chan: Nullstack's official waifu"},"links":[{"title":"YouTube","href":"https://www.youtube.com/channel/UCUNPaxoppH3lu6JTrUX78Ww"},{"title":"Twitter","href":"https://twitter.com/nullstackapp"},{"title":"GitHub","href":"https://github.com/nullstack"}]}}}, "page": {"image":"/image-1200x630.png","status":200,"title":"NJS File Extension - Nullstack","description":"Nullstack Javascript files let Webpack know which loaders to use at transpile time"}} \ No newline at end of file diff --git a/docs/nullachan.png b/docs/nullachan.png deleted file mode 100644 index 0f5ccd45..00000000 Binary files a/docs/nullachan.png and /dev/null differ diff --git a/docs/offline-9cdb5778f42a90a83e1427c9316c97d3.html b/docs/offline-9cdb5778f42a90a83e1427c9316c97d3.html deleted file mode 100644 index 4ddca07a..00000000 --- a/docs/offline-9cdb5778f42a90a83e1427c9316c97d3.html +++ /dev/null @@ -1,54 +0,0 @@ - - - - - -Page Not Found
Perhaps you want to learn about how to make a 404 page with Nullstack?
-If you are looking for something else, you should read the documentation.
-Page Not Found
Perhaps you want to learn about how to make a 404 page with Nullstack?
-If you are looking for something else, you should read the documentation.
-Perhaps you want to learn about how to make a 404 page with Nullstack?
\nIf you are looking for something else, you should read the documentation.
\n","description":"Sorry, this is not the page you are looking for.","status":404},"n-0-0-13":{},"n-0-0-15":{},"n-0-0-16":{"locale":"en-US","i18n":{"nullachan":{"alt":"Nulla-Chan","title":"Nulla-Chan: Nullstack's official waifu"},"links":[{"title":"YouTube","href":"https://www.youtube.com/channel/UCUNPaxoppH3lu6JTrUX78Ww"},{"title":"Twitter","href":"https://twitter.com/nullstackapp"},{"title":"GitHub","href":"https://github.com/nullstack"}]}}}, "page": {"image":"/image-1200x630.png","status":200,"title":"Page Not Found - Nullstack","description":"Sorry, this is not the page you are looking for."}} \ No newline at end of file diff --git a/docs/pt-br.html b/docs/pt-br.html deleted file mode 100644 index af0b34af..00000000 --- a/docs/pt-br.html +++ /dev/null @@ -1,258 +0,0 @@ - - - - - -Componentes Javascript Full-stack
para exércitos de um dev só
Nullstack é um framework full-stack para construir aplicações web progressivas.
Ele conecta uma camada de UI com estado a microserviços especializados no mesmo componente usando vanilla javascript.
Concentre-se em resolver sua lógica de negócios em vez de escrever código para interoperabilidade.
Renderização no Servidor
Nullstack gera HTML otimizado e com SEO pronto para o primeiro rascunho de sua rota em uma única requisição usando funções locais e com zero dependências javascript no cliente.
Single Page Application
Após hidratação, requisições irão buscar JSON de uma API gerada automaticamente por funções do servidor, atualizar o estado da aplicação e renderizar a página novamente.
Geração de Site Estático
Você pode até usar o Nullstack para gerar sites estáticos ultra-rápidos que servem HTML e se tornam uma Single Page Application usando uma API estática gerada automaticamente.
Recursos Completos como Componentes
Nullstack não é apenas outra parte de sua stack, mas sim a sua stack
Sua aplicação pode ser exportado do back-end para o front-end como um componente e montado em outra aplicação
import Nullstack from 'nullstack';
-
-class ProductList extends Nullstack {
-
- products = [];
-
- static async getProducts({ database }) {
- const [products] = await database.query(
- 'SELECT * FROM products'
- );
- return products;
- }
-
- async initiate() {
- this.products = await this.getProducts();
- }
-
- static async deleteProduct({ database, id }) {
- await database.query(
- 'DELETE FROM products WHERE id=?',
- [id]
- );
- }
-
- async remove({ id }) {
- await this.deleteProduct({ id });
- await this.initiate();
- }
-
- renderProduct({ id, name }) {
- return (
- <li>
- <button onclick={this.remove} id={id}>
- {name}
- </button>
- </li>
- )
- }
-
- render() {
- return (
- <ul>
- {this.products.map((product) => (
- <Product {...product} />
- ))}
- </ul>
- )
- }
-
-}
-
-export default ProductList;import Nullstack from 'nullstack';
-
-class ProductForm extends Nullstack {
-
- name = '';
- price = 0;
-
- static async getProductById({ database, id }) {
- const [products] = await database.query(
- 'SELECT * FROM products WHERE id=? LIMIT 1',
- [id]
- );
- return products[0];
- }
-
- async initiate({ params }) {
- const product = await this.getProductById({
- id: params.id
- });
- this.name = product.name;
- this.price = product.price;
- }
-
- static async updateProduct({ database, name, price, id }) {
- await database.query(
- 'UPDATE products SET name=?, price=? WHERE id=?',
- [name, price, id]
- );
- }
-
- async submit({ router, params }) {
- await this.updateProduct({
- id: params.id,
- name: this.name,
- price: this.price
- });
- router.url = '/products';
- }
-
- render() {
- return (
- <form onsubmit={this.submit}>
- <input class="form-control" bind={this.name} />
- <input type="number" step=".01" bind={this.price} />
- <button>Submit</button>
- </form>
- )
- }
-
-}
-
-export default ProductForm;O exemplo acima é o código completo de uma listagem de produtos e um formulário de edição sem esconder nenhuma linha.
Ambos os componentes invocam funções de servidor para ter acesso ao banco de dados MySQL no meio do JavaScript sem você ter que pensar em APIs.
A Produtividade está nos Detalhes
Os recursos do Nullstack foram extraídos de projetos da vida real com conveniência e consistência em mente
import Nullstack from 'nullstack';
-
-class Controlled extends Nullstack {
-
- count = 0;
-
- increment({delta}) {
- this.count += delta;
- }
-
- render() {
- return (
- <div>
- <button onclick={this.increment} delta={-1}>
- {this.count}
- </button>
- <span> {this.count} </span>
- <button onclick={this.increment} delta={1}>
- {this.count}
- </button>
- </div>
- )
- }
-
-}
-
-export default Controlled;import Nullstack from 'nullstack';
-
-class Binding extends Nullstack {
-
- number = 1;
- boolean = true;
-
- object = {number: 1};
- array = ['a', 'b', 'c'];
-
- render({params}) {
- return (
- <form>
- <input bind={this.number} />
- <input bind={this.boolean} type="checkbox" />
- <input bind={this.object.number} />
- {this.array.map((value, index) => (
- <input bind={this.array[index]} />
- ))}
- <input bind={params.page} />
- </form>
- )
- }
-
-}
-
-export default Binding;import Nullstack from 'nullstack';
-
-class Routes extends Nullstack {
-
- renderPost({params}) {
- return (
- <div>
- <div route="/post/getting-started">
- npx create-nullstack-app name
- </div>
- <div route="*"> {params.slug} </div>
- </div>
- )
- }
-
- render() {
- return (
- <div>
- <Post route="/post/:slug" />
- <a href="/post/hello-world"> Welcome </a>
- </div>
- )
- }
-
-}
-
-export default Routes;import Nullstack from 'nullstack';
-
-class Lifecycle extends Nullstack {
-
- prepare({environment}) {
- const {server, client} = environment;
- }
-
- async initiate({environment}) {
- const {server, client} = environment;
- }
-
- async hydrate({environment}) {
- const {client} = environment;
- }
-
- async update({environment}) {
- const {client} = environment;
- }
-
- async terminate({environment}) {
- const {client} = environment;
- }
-
-}
-
-export default Lifecycle;Assista aos nossos vídeos tutoriais do Nullstack
Nullstack se preocupa em tornar seu conteúdo o mais direto ao ponto e fácil de entender quanto possível
Por que você deve usar o Nullstack?
Desenvolvimento Escalável
Cada projeto começa pequeno e se torna complexo com o tempo. Escale conforme avança, não importa o tamanho da equipe.
Sem compromissos, sem imposições.Desenvolvimento Orientado a Recursos
Desenvolvimento de back e front end de um recurso no mesmo componente de forma organizada com facilidade de visão geral.
Verdadeira componentização e reutilização de código.Ecossistema já existente
Tira proveito de todo e qualquer pacote isomórfico em Vanilla Javascript já feito em toda história.
Todo o sua aplicação fala a mesma língua.Adapte-se rapidamente às mudanças de escopo
A estrutura horizontal, ao contrário de uma hierárquica, torna muito mais fácil mover os recursos.
Flexibilidade acima de burocracia.Ciclo de Vida Full-Stack
Métodos de ciclo de vida são funções nomeadas de forma especial que você pode declarar na classe.
-Cada método de ciclo de vida roda em uma fila de ordem específica, garantindo que todos os componentes do ciclo atual sejam preparados antes do primeiro ser iniciado.
-Prepare
Esse método é bloqueante e roda antes da primeira renderização do componente.
-Você pode usar essa função para definir o estado que o usuário verá antes do carregamento.
-Se o usuário estiver entrando através dessa rota, prepare irá rodar no servidor antes do Nullstack renderizar sua aplicação no lado do servidor.
Se o usuário estiver navegando por outra rota, esse método rodará no cliente.
-import Nullstack from 'nullstack';
-
-class Component extends Nullstack {
-
- // ...
-
- prepare() {
- this.date = new Date();
- }
-
- // ...
-
-}
-
-export default Component;
-Initiate
Esse método pode ser assíncrono, e roda assim que o componente for preparado e renderizado pela primeira vez.
-Você pode usá-lo para invocar outra função do servidor e carregar os dados para apresentar a página.
-Se o usuário estiver entrando através dessa rota, initiate rodará no servidor.
Nullstack irá esperar até que a promise seja resolvida e então finalmente irá gerar o HTML que será servido.
-Se o usuário estiver navegando por outra rota, esse método rodará no cliente.
-import Nullstack from 'nullstack';
-
-class Component extends Nullstack {
-
- // ...
-
- async initiate() {
- this.task = await getTaskByDay({
- day: this.date
- });
- }
-
- // ...
-
-}
-
-export default Component;
---✨ Aprenda mais sobre funções do servidor.
-
Hydrate
Esse método é assíncrono e rodará apenas no cliente.
-Ele sempre rodará independente do ambiente que iniciou o componente.
-Esse é um bom lugar para acionar dependências que manipulam o DOM ou que podem rodar apenas no lado do cliente.
-import Nullstack from 'nullstack';
-
-class Component extends Nullstack {
-
- // ...
-
- async hydrate() {
- this.timer = setInterval(() => {
- console.log(this.date);
- }, 1000);
- }
-
- // ...
-
-}
-
-export default Component;
-Update
Esse método é assíncrono e rodará apenas no cliente.
-Ele roda em todos os componentes sempre que o estado da aplicação mudar.
---🔥 Tome cuidado para não causar loops infinitos quando mutacionar o estado dentro de
-update.
Ele irá rodar logo antes da renderização, mas não irá bloquear a fila.
-A função update não rodará até que a aplicação seja renderizada após initiate.
import Nullstack from 'nullstack';
-
-class Component extends Nullstack {
-
- // ...
-
- async update() {
- const today = new Date();
- if(today.getDay() != this.date.getDay()) {
- this.date = today;
- await this.initiate();
- }
- }
-
- // ...
-
-}
-
-export default Component;
---✨ Métodos de ciclo de vida não têm efeitos colaterais, você pode chamá-los manualmentes sem causar problemas.
-
Terminate
Esse método é assíncrono e rodará apenas no cliente.
-Ele irá rodar após o componente deixar o DOM.
-Esse é o lugar para limpar qualquer coisa que você definiu no método hydrate.
Essa instância será levada pelo garbage collector após a resolução da Promise.
import Nullstack from 'nullstack';
-
-class Component extends Nullstack {
-
- // ...
-
- async terminate() {
- clearInterval(this.timer);
- }
-
- // ...
-
-}
-
-export default Component;
-Próximos passos
⚔ Aprenda sobre funções do servidor.
-Ciclo de Vida Full-Stack
Métodos de ciclo de vida são funções nomeadas de forma especial que você pode declarar na classe.
-Cada método de ciclo de vida roda em uma fila de ordem específica, garantindo que todos os componentes do ciclo atual sejam preparados antes do primeiro ser iniciado.
-Prepare
Esse método é bloqueante e roda antes da primeira renderização do componente.
-Você pode usar essa função para definir o estado que o usuário verá antes do carregamento.
-Se o usuário estiver entrando através dessa rota, prepare irá rodar no servidor antes do Nullstack renderizar sua aplicação no lado do servidor.
Se o usuário estiver navegando por outra rota, esse método rodará no cliente.
-import Nullstack from 'nullstack';
-
-class Component extends Nullstack {
-
- // ...
-
- prepare() {
- this.date = new Date();
- }
-
- // ...
-
-}
-
-export default Component;
-Initiate
Esse método pode ser assíncrono, e roda assim que o componente for preparado e renderizado pela primeira vez.
-Você pode usá-lo para invocar outra função do servidor e carregar os dados para apresentar a página.
-Se o usuário estiver entrando através dessa rota, initiate rodará no servidor.
Nullstack irá esperar até que a promise seja resolvida e então finalmente irá gerar o HTML que será servido.
-Se o usuário estiver navegando por outra rota, esse método rodará no cliente.
-import Nullstack from 'nullstack';
-
-class Component extends Nullstack {
-
- // ...
-
- async initiate() {
- this.task = await getTaskByDay({
- day: this.date
- });
- }
-
- // ...
-
-}
-
-export default Component;
---✨ Aprenda mais sobre funções do servidor.
-
Hydrate
Esse método é assíncrono e rodará apenas no cliente.
-Ele sempre rodará independente do ambiente que iniciou o componente.
-Esse é um bom lugar para acionar dependências que manipulam o DOM ou que podem rodar apenas no lado do cliente.
-import Nullstack from 'nullstack';
-
-class Component extends Nullstack {
-
- // ...
-
- async hydrate() {
- this.timer = setInterval(() => {
- console.log(this.date);
- }, 1000);
- }
-
- // ...
-
-}
-
-export default Component;
-Update
Esse método é assíncrono e rodará apenas no cliente.
-Ele roda em todos os componentes sempre que o estado da aplicação mudar.
---🔥 Tome cuidado para não causar loops infinitos quando mutacionar o estado dentro de
-update.
Ele irá rodar logo antes da renderização, mas não irá bloquear a fila.
-A função update não rodará até que a aplicação seja renderizada após initiate.
import Nullstack from 'nullstack';
-
-class Component extends Nullstack {
-
- // ...
-
- async update() {
- const today = new Date();
- if(today.getDay() != this.date.getDay()) {
- this.date = today;
- await this.initiate();
- }
- }
-
- // ...
-
-}
-
-export default Component;
---✨ Métodos de ciclo de vida não têm efeitos colaterais, você pode chamá-los manualmentes sem causar problemas.
-
Terminate
Esse método é assíncrono e rodará apenas no cliente.
-Ele irá rodar após o componente deixar o DOM.
-Esse é o lugar para limpar qualquer coisa que você definiu no método hydrate.
Essa instância será levada pelo garbage collector após a resolução da Promise.
import Nullstack from 'nullstack';
-
-class Component extends Nullstack {
-
- // ...
-
- async terminate() {
- clearInterval(this.timer);
- }
-
- // ...
-
-}
-
-export default Component;
-Próximos passos
⚔ Aprenda sobre funções do servidor.
-Métodos de ciclo de vida são funções nomeadas de forma especial que você pode declarar na classe.
\nCada método de ciclo de vida roda em uma fila de ordem específica, garantindo que todos os componentes do ciclo atual sejam preparados antes do primeiro ser iniciado.
\nPrepare
Esse método é bloqueante e roda antes da primeira renderização do componente.
\nVocê pode usar essa função para definir o estado que o usuário verá antes do carregamento.
\nSe o usuário estiver entrando através dessa rota, prepare irá rodar no servidor antes do Nullstack renderizar sua aplicação no lado do servidor.
Se o usuário estiver navegando por outra rota, esse método rodará no cliente.
\nimport Nullstack from 'nullstack';\n\nclass Component extends Nullstack {\n\n // ...\n\n prepare() {\n this.date = new Date();\n }\n\n // ...\n\n}\n\nexport default Component;\nInitiate
Esse método pode ser assíncrono, e roda assim que o componente for preparado e renderizado pela primeira vez.
\nVocê pode usá-lo para invocar outra função do servidor e carregar os dados para apresentar a página.
\nSe o usuário estiver entrando através dessa rota, initiate rodará no servidor.
Nullstack irá esperar até que a promise seja resolvida e então finalmente irá gerar o HTML que será servido.
\nSe o usuário estiver navegando por outra rota, esse método rodará no cliente.
\nimport Nullstack from 'nullstack';\n\nclass Component extends Nullstack {\n\n // ...\n\n async initiate() {\n this.task = await getTaskByDay({\n day: this.date\n });\n }\n\n // ...\n\n}\n\nexport default Component;\n\n\n✨ Aprenda mais sobre funções do servidor.
\n
Hydrate
Esse método é assíncrono e rodará apenas no cliente.
\nEle sempre rodará independente do ambiente que iniciou o componente.
\nEsse é um bom lugar para acionar dependências que manipulam o DOM ou que podem rodar apenas no lado do cliente.
\nimport Nullstack from 'nullstack';\n\nclass Component extends Nullstack {\n\n // ...\n\n async hydrate() {\n this.timer = setInterval(() => {\n console.log(this.date);\n }, 1000);\n }\n\n // ...\n\n}\n\nexport default Component;\nUpdate
Esse método é assíncrono e rodará apenas no cliente.
\nEle roda em todos os componentes sempre que o estado da aplicação mudar.
\n\n\n🔥 Tome cuidado para não causar loops infinitos quando mutacionar o estado dentro de
\nupdate.
Ele irá rodar logo antes da renderização, mas não irá bloquear a fila.
\nA função update não rodará até que a aplicação seja renderizada após initiate.
import Nullstack from 'nullstack';\n\nclass Component extends Nullstack {\n\n // ...\n\n async update() {\n const today = new Date();\n if(today.getDay() != this.date.getDay()) {\n this.date = today;\n await this.initiate();\n }\n }\n\n // ...\n\n}\n\nexport default Component;\n\n\n✨ Métodos de ciclo de vida não têm efeitos colaterais, você pode chamá-los manualmentes sem causar problemas.
\n
Terminate
Esse método é assíncrono e rodará apenas no cliente.
\nEle irá rodar após o componente deixar o DOM.
\nEsse é o lugar para limpar qualquer coisa que você definiu no método hydrate.
Essa instância será levada pelo garbage collector após a resolução da Promise.
import Nullstack from 'nullstack';\n\nclass Component extends Nullstack {\n\n // ...\n\n async terminate() {\n clearInterval(this.timer);\n }\n\n // ...\n\n}\n\nexport default Component;\nPróximos passos
⚔ Aprenda sobre funções do servidor.
\n","description":"Métodos de ciclo de vida são funções nomeadas de forma especial que você pode declarar na classe"},"n-0-0-13":{},"n-0-0-15":{},"n-0-0-16":{"locale":"pt-BR","i18n":{"nullachan":{"alt":"Nulla-Chan","title":"Nulla-Chan: Waifu oficial do Nullstack"},"links":[{"title":"YouTube","href":"https://www.youtube.com/channel/UCUNPaxoppH3lu6JTrUX78Ww"},{"title":"Twitter","href":"https://twitter.com/nullstackapp"},{"title":"GitHub","href":"https://github.com/nullstack"}]}}}, "page": {"image":"/image-1200x630.png","status":200,"title":"Ciclo de Vida Full-Stack - Nullstack","description":"Métodos de ciclo de vida são funções nomeadas de forma especial que você pode declarar na classe"}} \ No newline at end of file diff --git a/docs/pt-br/comecando.html b/docs/pt-br/comecando.html deleted file mode 100644 index 9d971fc4..00000000 --- a/docs/pt-br/comecando.html +++ /dev/null @@ -1,128 +0,0 @@ - - - - - -Começando
--📌 Você pode assistir um tutorial no nosso Canal do Youtube.
-
Crie aplicações javascript full-stack em segundos usando npx para gerar os arquivos do seu projeto usando o template mais recente.
--🔥 A versão mínima necessária do node.js para o modo de desenvovimento é 12.12.0.
-
--⚠ Se o diretório em que você está contém espaços, você usa Windows e o
-npxder erros, leia sobre o bug conhecido do npx.
Troque project-name com o nome do seu projeto e rode o comanto abaixo para começar um projeto:
npx create-nullstack-app project-name
-Troque o diretório para a pasta gerada:
-cd project-name
-Instale as dependências:
-npm install
-Inicie a aplicação em modo de desenvolvimento:
-npm start
-Entendendo os arquivos gerados
As seguintes pastas e arquivos serão gerados:
-index.js
Este é o ponto de entrada do Webpack.
-Normalmente, você não precisará mexer neste arquivo, mas é um lugar conveniente para importar dependências globais como frameworks CSS.
-src/
Esta pasta contêm o código fonte da sua aplicação.
-src/Application.njs
Este é o arquivo principal da sua aplicação.
---✨ Saiba mais sobre a extensão de arquivo njs.
-
A função start será automaticamente chamada uma vez que você rode npm start, use a para preencher o contexto do seu servidor com coisas como banco de dados, configurações, e segredos.
--✨ Saiba mais sobre a inicialização da aplicação.
-
src/Application.scss
Este é um arquivo vazio só para demonstrar que você pode usar SCSS com Nullstack.
-É uma boa prática importar um arquivo de estilo em um componente com o mesmo nome.
---✨ Saiba mais sobre estilos.
-
public/
Todo arquivo aqui ficará disponível para qualquer um na raíz do domínio.
-Por padrão create-nullstack-app gera os ícones necessários para o seu manifest.json e imagens para meta tags OG.
--✨ Saiba mais sobre o manifest.json.
-
Tenha certeza de trocar estas imagens pela identidade do seu projeto.
-.development/
Este é o resultado compilado da sua aplicação em modo de desenvolvimento.
---🔥 Não toque nesta pasta
-
.production/
Este é o resultado compilado da sua aplicação em modo de produção.
---🔥 Não toque nesta pasta
-
--✨ Saiba mais sobre como fazer deploy de aplicação Nullstack.
-
Bug conhecido do npx
Avisado em issues do npx como #100, #110 e #143, ele tem um erro ao tentar resolver o caminho para sua pasta de cache quando este contém espaços.
Se isso ocorrer com você, nossas recomendações são:
--
-
Usando baixado como normalmente faria com
-npm:npm i -g create-nullstack-app -create-nullstack-app project-name -
-ou, mudar o diretório da pasta de cache, como dito aqui e aqui:
--
-
- Se deseja manter o uso do espaço, subtitua
PrimeiroNomepelo usado no seu caminho e rode:
-
-npm config set cache "C:\Users\PrimeiroNome~1\AppData\Roaming\npm-cache" --global --
-
- ou, usando outro caminho sem espaços: -
npm config set cache C:\tmp\nodejs\npm-cache --global -
-- Se deseja manter o uso do espaço, subtitua
Próximo Passo
⚔ Crie seu primeiro componente renderizável.
-Começando
--📌 Você pode assistir um tutorial no nosso Canal do Youtube.
-
Crie aplicações javascript full-stack em segundos usando npx para gerar os arquivos do seu projeto usando o template mais recente.
--🔥 A versão mínima necessária do node.js para o modo de desenvovimento é 12.12.0.
-
--⚠ Se o diretório em que você está contém espaços, você usa Windows e o
-npxder erros, leia sobre o bug conhecido do npx.
Troque project-name com o nome do seu projeto e rode o comanto abaixo para começar um projeto:
npx create-nullstack-app project-name
-Troque o diretório para a pasta gerada:
-cd project-name
-Instale as dependências:
-npm install
-Inicie a aplicação em modo de desenvolvimento:
-npm start
-Entendendo os arquivos gerados
As seguintes pastas e arquivos serão gerados:
-index.js
Este é o ponto de entrada do Webpack.
-Normalmente, você não precisará mexer neste arquivo, mas é um lugar conveniente para importar dependências globais como frameworks CSS.
-src/
Esta pasta contêm o código fonte da sua aplicação.
-src/Application.njs
Este é o arquivo principal da sua aplicação.
---✨ Saiba mais sobre a extensão de arquivo njs.
-
A função start será automaticamente chamada uma vez que você rode npm start, use a para preencher o contexto do seu servidor com coisas como banco de dados, configurações, e segredos.
--✨ Saiba mais sobre a inicialização da aplicação.
-
src/Application.scss
Este é um arquivo vazio só para demonstrar que você pode usar SCSS com Nullstack.
-É uma boa prática importar um arquivo de estilo em um componente com o mesmo nome.
---✨ Saiba mais sobre estilos.
-
public/
Todo arquivo aqui ficará disponível para qualquer um na raíz do domínio.
-Por padrão create-nullstack-app gera os ícones necessários para o seu manifest.json e imagens para meta tags OG.
--✨ Saiba mais sobre o manifest.json.
-
Tenha certeza de trocar estas imagens pela identidade do seu projeto.
-.development/
Este é o resultado compilado da sua aplicação em modo de desenvolvimento.
---🔥 Não toque nesta pasta
-
.production/
Este é o resultado compilado da sua aplicação em modo de produção.
---🔥 Não toque nesta pasta
-
--✨ Saiba mais sobre como fazer deploy de aplicação Nullstack.
-
Bug conhecido do npx
Avisado em issues do npx como #100, #110 e #143, ele tem um erro ao tentar resolver o caminho para sua pasta de cache quando este contém espaços.
Se isso ocorrer com você, nossas recomendações são:
--
-
Usando baixado como normalmente faria com
-npm:npm i -g create-nullstack-app -create-nullstack-app project-name -
-ou, mudar o diretório da pasta de cache, como dito aqui e aqui:
--
-
- Se deseja manter o uso do espaço, subtitua
PrimeiroNomepelo usado no seu caminho e rode:
-
-npm config set cache "C:\Users\PrimeiroNome~1\AppData\Roaming\npm-cache" --global --
-
- ou, usando outro caminho sem espaços: -
npm config set cache C:\tmp\nodejs\npm-cache --global -
-- Se deseja manter o uso do espaço, subtitua
Próximo Passo
⚔ Crie seu primeiro componente renderizável.
-\n\n📌 Você pode assistir um tutorial no nosso Canal do Youtube.
\n
Crie aplicações javascript full-stack em segundos usando npx para gerar os arquivos do seu projeto usando o template mais recente.
\n\n🔥 A versão mínima necessária do node.js para o modo de desenvovimento é 12.12.0.
\n
\n\n⚠ Se o diretório em que você está contém espaços, você usa Windows e o
\nnpxder erros, leia sobre o bug conhecido do npx.
Troque project-name com o nome do seu projeto e rode o comanto abaixo para começar um projeto:
npx create-nullstack-app project-name\nTroque o diretório para a pasta gerada:
\ncd project-name\nInstale as dependências:
\nnpm install\nInicie a aplicação em modo de desenvolvimento:
\nnpm start\nEntendendo os arquivos gerados
As seguintes pastas e arquivos serão gerados:
\nindex.js
Este é o ponto de entrada do Webpack.
\nNormalmente, você não precisará mexer neste arquivo, mas é um lugar conveniente para importar dependências globais como frameworks CSS.
\nsrc/
Esta pasta contêm o código fonte da sua aplicação.
\nsrc/Application.njs
Este é o arquivo principal da sua aplicação.
\n\n\n✨ Saiba mais sobre a extensão de arquivo njs.
\n
A função start será automaticamente chamada uma vez que você rode npm start, use a para preencher o contexto do seu servidor com coisas como banco de dados, configurações, e segredos.
\n\n✨ Saiba mais sobre a inicialização da aplicação.
\n
src/Application.scss
Este é um arquivo vazio só para demonstrar que você pode usar SCSS com Nullstack.
\nÉ uma boa prática importar um arquivo de estilo em um componente com o mesmo nome.
\n\n\n✨ Saiba mais sobre estilos.
\n
public/
Todo arquivo aqui ficará disponível para qualquer um na raíz do domínio.
\nPor padrão create-nullstack-app gera os ícones necessários para o seu manifest.json e imagens para meta tags OG.
\n\n✨ Saiba mais sobre o manifest.json.
\n
Tenha certeza de trocar estas imagens pela identidade do seu projeto.
\n.development/
Este é o resultado compilado da sua aplicação em modo de desenvolvimento.
\n\n\n🔥 Não toque nesta pasta
\n
.production/
Este é o resultado compilado da sua aplicação em modo de produção.
\n\n\n🔥 Não toque nesta pasta
\n
\n\n✨ Saiba mais sobre como fazer deploy de aplicação Nullstack.
\n
Bug conhecido do npx
Avisado em issues do npx como #100, #110 e #143, ele tem um erro ao tentar resolver o caminho para sua pasta de cache quando este contém espaços.
Se isso ocorrer com você, nossas recomendações são:
\n- \n
Usando baixado como normalmente faria com
\nnpm:npm i -g create-nullstack-app\ncreate-nullstack-app project-name\n\nou, mudar o diretório da pasta de cache, como dito aqui e aqui:
\n- \n
- Se deseja manter o uso do espaço, subtitua
PrimeiroNomepelo usado no seu caminho e rode: \n
\nnpm config set cache \"C:\\Users\\PrimeiroNome~1\\AppData\\Roaming\\npm-cache\" --global\n- \n
- ou, usando outro caminho sem espaços: \n
npm config set cache C:\\tmp\\nodejs\\npm-cache --global\n\n- Se deseja manter o uso do espaço, subtitua
Próximo Passo
⚔ Crie seu primeiro componente renderizável.
\n","description":"Crie aplicações full-stack em javascript em meros segundos"},"n-0-0-13":{},"n-0-0-15":{},"n-0-0-16":{"locale":"pt-BR","i18n":{"nullachan":{"alt":"Nulla-Chan","title":"Nulla-Chan: Waifu oficial do Nullstack"},"links":[{"title":"YouTube","href":"https://www.youtube.com/channel/UCUNPaxoppH3lu6JTrUX78Ww"},{"title":"Twitter","href":"https://twitter.com/nullstackapp"},{"title":"GitHub","href":"https://github.com/nullstack"}]}}}, "page": {"image":"/image-1200x630.png","status":200,"title":"Começando - Nullstack","description":"Crie aplicações full-stack em javascript em meros segundos"}} \ No newline at end of file diff --git a/docs/pt-br/como-fazer-deploy-de-aplicacao-nullstack.html b/docs/pt-br/como-fazer-deploy-de-aplicacao-nullstack.html deleted file mode 100644 index 8026ef0a..00000000 --- a/docs/pt-br/como-fazer-deploy-de-aplicacao-nullstack.html +++ /dev/null @@ -1,78 +0,0 @@ - - - - - -Como fazer Deploy
Com o Nullstack é fácil ter sua aplicação instalada e funcionando no modo de produção
---🐱💻 stonks
-
Nullstack compila seu código e todas as suas dependências usando Webpack.
-A saída da compilação é movida para a pasta .production e é a única pasta além de public que precisa ser movida para a máquina host.
-Se você tiver project.cdn definido, deverá mover a pasta public para o cdn real.
--💡 É importante que a pasta .production esteja presente para a detecção do ambiente
-
A máquina host deve ter pelo menos a versão 8.10.0 do node instalada.
-Você não precisa executar "npm install" na máquina host.
-- --
Para iniciar o servidor, basta executar:
-node .production/server.js
---✨ Recomenda-se o uso de um gerenciador de processos como PM2
-
Como fazer o Deploy de um site estático gerado com NullStack
Depois de gerar um site estático, tudo o que você precisa fazer é mover a pasta de saída para qualquer máquina host capaz de servir HTML.
-Próxima Etapa
--🎉 Parabéns. Você concluiu os conceitos avançados!
-
⚔ Aprenda como usar MongoDB com Nullstack.
-Como fazer Deploy
Com o Nullstack é fácil ter sua aplicação instalada e funcionando no modo de produção
---🐱💻 stonks
-
Nullstack compila seu código e todas as suas dependências usando Webpack.
-A saída da compilação é movida para a pasta .production e é a única pasta além de public que precisa ser movida para a máquina host.
-Se você tiver project.cdn definido, deverá mover a pasta public para o cdn real.
--💡 É importante que a pasta .production esteja presente para a detecção do ambiente
-
A máquina host deve ter pelo menos a versão 8.10.0 do node instalada.
-Você não precisa executar "npm install" na máquina host.
-- --
Para iniciar o servidor, basta executar:
-node .production/server.js
---✨ Recomenda-se o uso de um gerenciador de processos como PM2
-
Como fazer o Deploy de um site estático gerado com NullStack
Depois de gerar um site estático, tudo o que você precisa fazer é mover a pasta de saída para qualquer máquina host capaz de servir HTML.
-Próxima Etapa
--🎉 Parabéns. Você concluiu os conceitos avançados!
-
⚔ Aprenda como usar MongoDB com Nullstack.
-Com o Nullstack é fácil ter sua aplicação instalada e funcionando no modo de produção
\n\n\n🐱💻 stonks
\n
Nullstack compila seu código e todas as suas dependências usando Webpack.
\nA saída da compilação é movida para a pasta .production e é a única pasta além de public que precisa ser movida para a máquina host.
\nSe você tiver project.cdn definido, deverá mover a pasta public para o cdn real.
\n\n💡 É importante que a pasta .production esteja presente para a detecção do ambiente
\n
A máquina host deve ter pelo menos a versão 8.10.0 do node instalada.
\nVocê não precisa executar "npm install" na máquina host.
\n\n\n\n
Para iniciar o servidor, basta executar:
\nnode .production/server.js\n\n\n✨ Recomenda-se o uso de um gerenciador de processos como PM2
\n
Como fazer o Deploy de um site estático gerado com NullStack
Depois de gerar um site estático, tudo o que você precisa fazer é mover a pasta de saída para qualquer máquina host capaz de servir HTML.
\nPróxima Etapa
\n\n🎉 Parabéns. Você concluiu os conceitos avançados!
\n
⚔ Aprenda como usar MongoDB com Nullstack.
\n","description":"Com o Nullstack é fácil ter sua aplicação instalada e funcionando no modo de produção"},"n-0-0-13":{},"n-0-0-15":{},"n-0-0-16":{"locale":"pt-BR","i18n":{"nullachan":{"alt":"Nulla-Chan","title":"Nulla-Chan: Waifu oficial do Nullstack"},"links":[{"title":"YouTube","href":"https://www.youtube.com/channel/UCUNPaxoppH3lu6JTrUX78Ww"},{"title":"Twitter","href":"https://twitter.com/nullstackapp"},{"title":"GitHub","href":"https://github.com/nullstack"}]}}}, "page": {"image":"/image-1200x630.png","status":200,"title":"Como fazer Deploy - Nullstack","description":"Com o Nullstack é fácil ter sua aplicação instalada e funcionando no modo de produção"}} \ No newline at end of file diff --git a/docs/pt-br/como-usar-facebook-pixel-no-nullstack.html b/docs/pt-br/como-usar-facebook-pixel-no-nullstack.html deleted file mode 100644 index 6ce18d1d..00000000 --- a/docs/pt-br/como-usar-facebook-pixel-no-nullstack.html +++ /dev/null @@ -1,137 +0,0 @@ - - - - - -Facebook Pixel
De acordo com developers.facebook.com:
-"O Facebook Pixel é um trecho de código JavaScript que permite rastrear a atividade do visitante em seu site."
-Você pode aproveitar as vantagens do contexto e dos eventos personalizados para criar um componente que envia eventos Pixel dinamicamente.
-O Facebook Pixel só pode ser chamado depois de hydrate para garantir que está sendo executado no cliente.
import Nullstack from 'nullstack';
-
-class FacebookPixel extends Nullstack {
-
- async hydrate({page, id}) {
- ! function(f, b, e, v, n, t, s) {
- if (f.fbq) return;
- n = f.fbq = function() {
- n.callMethod ?
- n.callMethod.apply(n, arguments) : n.queue.push(arguments)
- };
- if (!f._fbq) f._fbq = n;
- n.push = n;
- n.loaded = !0;
- n.version = '2.0';
- n.queue = [];
- t = b.createElement(e);
- t.async = !0;
- t.src = v;
- s = b.getElementsByTagName(e)[0];
- s.parentNode.insertBefore(t, s)
- }(window, document, 'script',
- 'https://connect.facebook.net/en_US/fbevents.js');
- fbq('init', id);
- fbq('track', 'PageView');
- window.addEventListener(page.event, () => {
- fbq('init', id);
- fbq('track', 'PageView');
- })
- }
-}
-
-export default FacebookPixel;
-import Nullstack from 'nullstack';
-import FacebookPixel from './FacebookPixel';
-
-class Application extends Nullstack {
-
- // ...
-
- render() {
- return (
- <main>
- <FacebookPixel id="SUBSTITUA_COM_SEU_ID_DO_FACEBOOK_PIXEL" />
- </main>
- )
- }
-
-
-}
-
-export default Application;
-Usando um Wrapper
Alternativamente, você pode instalar nullstack-facebook-pixel como uma dependência:
-npm install nullstack-facebook-pixel
-import Nullstack from 'nullstack';
-import FacebookPixel from 'nullstack-facebook-pixel';
-
-class Application extends Nullstack {
-
- // ...
-
- render() {
- return (
- <main>
- <FacebookPixel id="SUBSTITUA_COM_SEU_ID_DO_FACEBOOK_PIXEL" />
- </main>
- )
- }
-
-
-}
-
-export default Application;
-Próximo Passo
--🎉 Parabéns. Você concluiu a documentação!
-
⚔ Se você deseja ver mais exemplos aqui, abra uma issue no github.
-Facebook Pixel
De acordo com developers.facebook.com:
-"O Facebook Pixel é um trecho de código JavaScript que permite rastrear a atividade do visitante em seu site."
-Você pode aproveitar as vantagens do contexto e dos eventos personalizados para criar um componente que envia eventos Pixel dinamicamente.
-O Facebook Pixel só pode ser chamado depois de hydrate para garantir que está sendo executado no cliente.
import Nullstack from 'nullstack';
-
-class FacebookPixel extends Nullstack {
-
- async hydrate({page, id}) {
- ! function(f, b, e, v, n, t, s) {
- if (f.fbq) return;
- n = f.fbq = function() {
- n.callMethod ?
- n.callMethod.apply(n, arguments) : n.queue.push(arguments)
- };
- if (!f._fbq) f._fbq = n;
- n.push = n;
- n.loaded = !0;
- n.version = '2.0';
- n.queue = [];
- t = b.createElement(e);
- t.async = !0;
- t.src = v;
- s = b.getElementsByTagName(e)[0];
- s.parentNode.insertBefore(t, s)
- }(window, document, 'script',
- 'https://connect.facebook.net/en_US/fbevents.js');
- fbq('init', id);
- fbq('track', 'PageView');
- window.addEventListener(page.event, () => {
- fbq('init', id);
- fbq('track', 'PageView');
- })
- }
-}
-
-export default FacebookPixel;
-import Nullstack from 'nullstack';
-import FacebookPixel from './FacebookPixel';
-
-class Application extends Nullstack {
-
- // ...
-
- render() {
- return (
- <main>
- <FacebookPixel id="SUBSTITUA_COM_SEU_ID_DO_FACEBOOK_PIXEL" />
- </main>
- )
- }
-
-
-}
-
-export default Application;
-Usando um Wrapper
Alternativamente, você pode instalar nullstack-facebook-pixel como uma dependência:
-npm install nullstack-facebook-pixel
-import Nullstack from 'nullstack';
-import FacebookPixel from 'nullstack-facebook-pixel';
-
-class Application extends Nullstack {
-
- // ...
-
- render() {
- return (
- <main>
- <FacebookPixel id="SUBSTITUA_COM_SEU_ID_DO_FACEBOOK_PIXEL" />
- </main>
- )
- }
-
-
-}
-
-export default Application;
-Próximo Passo
--🎉 Parabéns. Você concluiu a documentação!
-
⚔ Se você deseja ver mais exemplos aqui, abra uma issue no github.
-De acordo com developers.facebook.com:
\n"O Facebook Pixel é um trecho de código JavaScript que permite rastrear a atividade do visitante em seu site."
\nVocê pode aproveitar as vantagens do contexto e dos eventos personalizados para criar um componente que envia eventos Pixel dinamicamente.
\nO Facebook Pixel só pode ser chamado depois de hydrate para garantir que está sendo executado no cliente.
import Nullstack from 'nullstack';\n\nclass FacebookPixel extends Nullstack {\n\n async hydrate({page, id}) {\n ! function(f, b, e, v, n, t, s) {\n if (f.fbq) return;\n n = f.fbq = function() {\n n.callMethod ?\n n.callMethod.apply(n, arguments) : n.queue.push(arguments)\n };\n if (!f._fbq) f._fbq = n;\n n.push = n;\n n.loaded = !0;\n n.version = '2.0';\n n.queue = [];\n t = b.createElement(e);\n t.async = !0;\n t.src = v;\n s = b.getElementsByTagName(e)[0];\n s.parentNode.insertBefore(t, s)\n }(window, document, 'script',\n 'https://connect.facebook.net/en_US/fbevents.js');\n fbq('init', id);\n fbq('track', 'PageView');\n window.addEventListener(page.event, () => {\n fbq('init', id);\n fbq('track', 'PageView');\n })\n }\n}\n\nexport default FacebookPixel;\nimport Nullstack from 'nullstack';\nimport FacebookPixel from './FacebookPixel';\n\nclass Application extends Nullstack {\n\n // ...\n\n render() {\n return (\n <main>\n <FacebookPixel id=\"SUBSTITUA_COM_SEU_ID_DO_FACEBOOK_PIXEL\" />\n </main>\n )\n }\n\n\n}\n\nexport default Application;\nUsando um Wrapper
Alternativamente, você pode instalar nullstack-facebook-pixel como uma dependência:
\nnpm install nullstack-facebook-pixel\nimport Nullstack from 'nullstack';\nimport FacebookPixel from 'nullstack-facebook-pixel';\n\nclass Application extends Nullstack {\n\n // ...\n\n render() {\n return (\n <main>\n <FacebookPixel id=\"SUBSTITUA_COM_SEU_ID_DO_FACEBOOK_PIXEL\" />\n </main>\n )\n }\n\n\n}\n\nexport default Application;\nPróximo Passo
\n\n🎉 Parabéns. Você concluiu a documentação!
\n
⚔ Se você deseja ver mais exemplos aqui, abra uma issue no github.
\n","description":"Aproveite as vantagens do [contexto](/pt-br/contexto) e [eventos personalizados](/pt-br/contexto-page) para criar um componente que envia eventos Pixel dinamicamente."},"n-0-0-13":{},"n-0-0-15":{},"n-0-0-16":{"locale":"pt-BR","i18n":{"nullachan":{"alt":"Nulla-Chan","title":"Nulla-Chan: Waifu oficial do Nullstack"},"links":[{"title":"YouTube","href":"https://www.youtube.com/channel/UCUNPaxoppH3lu6JTrUX78Ww"},{"title":"Twitter","href":"https://twitter.com/nullstackapp"},{"title":"GitHub","href":"https://github.com/nullstack"}]}}}, "page": {"image":"/image-1200x630.png","status":200,"title":"Facebook Pixel - Nullstack","description":"Aproveite as vantagens do [contexto](/pt-br/contexto) e [eventos personalizados](/pt-br/contexto-page) para criar um componente que envia eventos Pixel dinamicamente."}} \ No newline at end of file diff --git a/docs/pt-br/como-usar-google-analytics-no-nullstack.html b/docs/pt-br/como-usar-google-analytics-no-nullstack.html deleted file mode 100644 index 1c9f26d4..00000000 --- a/docs/pt-br/como-usar-google-analytics-no-nullstack.html +++ /dev/null @@ -1,135 +0,0 @@ - - - - - -Google Analytics
De acordo com analytics.google.com:
-"O Google Analytics permite que você avalie o ROI de publicidade, bem como rastreie o Flash, vídeo e mídias sociais em sites e aplicativos."
-Você pode aproveitar as vantagens do contexto e dos eventos personalizados para criar um componente que envia eventos GTAG dinamicamente.
-O GTAG só pode ser chamado depois de hydrate para garantir que está sendo executado no cliente.
import Nullstack from 'nullstack';
-
-class GoogleAnalytics extends Nullstack {
-
- hydrate({router, page, id}) {
- window.dataLayer = window.dataLayer || [];
- function gtag(){
- dataLayer.push(arguments);
- }
- gtag('js', new Date());
- gtag('config', id, {
- page_title: page.title,
- page_path: router.url
- });
- window.addEventListener(page.event, () => {
- gtag('event', 'page_view', {
- page_title: page.title,
- page_path: router.url
- })
- })
- }
-
- render({id}) {
- return (
- <script
- async
- src={`https://www.googletagmanager.com/gtag/js?id=${id}`}
- />
- )
- }
-
-}
-
-export default GoogleAnalytics;
-import Nullstack from 'nullstack';
-import GoogleAnalytics from './GoogleAnalytics';
-
-class Application extends Nullstack {
-
- // ...
-
- render() {
- return (
- <main>
- <GoogleAnalytics id="SUBSTITUA_COM_SEU_ID_DO_GOOGLE_ANALYTICS" />
- </main>
- )
- }
-
-
-}
-
-export default Application;
-Usando um Wrapper
Alternativamente, você pode instalar o nullstack-google-analytics como uma dependência:
-npm install nullstack-google-analytics
-import Nullstack from 'nullstack';
-import GoogleAnalytics from 'nullstack-google-analytics';
-
-class Application extends Nullstack {
-
- // ...
-
- render() {
- return (
- <main>
- <GoogleAnalytics id="SUBSTITUA_COM_SEU_ID_DO_GOOGLE_ANALYTICS" />
- </main>
- )
- }
-
-
-}
-
-export default Application;
-Próximo Passo
⚔ Aprenda como usar o Facebook Pixel com o Nullstack.
-Google Analytics
De acordo com analytics.google.com:
-"O Google Analytics permite que você avalie o ROI de publicidade, bem como rastreie o Flash, vídeo e mídias sociais em sites e aplicativos."
-Você pode aproveitar as vantagens do contexto e dos eventos personalizados para criar um componente que envia eventos GTAG dinamicamente.
-O GTAG só pode ser chamado depois de hydrate para garantir que está sendo executado no cliente.
import Nullstack from 'nullstack';
-
-class GoogleAnalytics extends Nullstack {
-
- hydrate({router, page, id}) {
- window.dataLayer = window.dataLayer || [];
- function gtag(){
- dataLayer.push(arguments);
- }
- gtag('js', new Date());
- gtag('config', id, {
- page_title: page.title,
- page_path: router.url
- });
- window.addEventListener(page.event, () => {
- gtag('event', 'page_view', {
- page_title: page.title,
- page_path: router.url
- })
- })
- }
-
- render({id}) {
- return (
- <script
- async
- src={`https://www.googletagmanager.com/gtag/js?id=${id}`}
- />
- )
- }
-
-}
-
-export default GoogleAnalytics;
-import Nullstack from 'nullstack';
-import GoogleAnalytics from './GoogleAnalytics';
-
-class Application extends Nullstack {
-
- // ...
-
- render() {
- return (
- <main>
- <GoogleAnalytics id="SUBSTITUA_COM_SEU_ID_DO_GOOGLE_ANALYTICS" />
- </main>
- )
- }
-
-
-}
-
-export default Application;
-Usando um Wrapper
Alternativamente, você pode instalar o nullstack-google-analytics como uma dependência:
-npm install nullstack-google-analytics
-import Nullstack from 'nullstack';
-import GoogleAnalytics from 'nullstack-google-analytics';
-
-class Application extends Nullstack {
-
- // ...
-
- render() {
- return (
- <main>
- <GoogleAnalytics id="SUBSTITUA_COM_SEU_ID_DO_GOOGLE_ANALYTICS" />
- </main>
- )
- }
-
-
-}
-
-export default Application;
-Próximo Passo
⚔ Aprenda como usar o Facebook Pixel com o Nullstack.
-De acordo com analytics.google.com:
\n"O Google Analytics permite que você avalie o ROI de publicidade, bem como rastreie o Flash, vídeo e mídias sociais em sites e aplicativos."
\nVocê pode aproveitar as vantagens do contexto e dos eventos personalizados para criar um componente que envia eventos GTAG dinamicamente.
\nO GTAG só pode ser chamado depois de hydrate para garantir que está sendo executado no cliente.
import Nullstack from 'nullstack';\n\nclass GoogleAnalytics extends Nullstack {\n\n hydrate({router, page, id}) {\n window.dataLayer = window.dataLayer || [];\n function gtag(){\n dataLayer.push(arguments);\n }\n gtag('js', new Date());\n gtag('config', id, {\n page_title: page.title,\n page_path: router.url\n });\n window.addEventListener(page.event, () => {\n gtag('event', 'page_view', {\n page_title: page.title,\n page_path: router.url\n })\n })\n }\n \n render({id}) {\n return (\n <script \n async\n src={`https://www.googletagmanager.com/gtag/js?id=${id}`}\n />\n )\n }\n\n}\n\nexport default GoogleAnalytics;\nimport Nullstack from 'nullstack';\nimport GoogleAnalytics from './GoogleAnalytics';\n\nclass Application extends Nullstack {\n\n // ...\n\n render() {\n return (\n <main>\n <GoogleAnalytics id=\"SUBSTITUA_COM_SEU_ID_DO_GOOGLE_ANALYTICS\" />\n </main>\n )\n }\n\n\n}\n\nexport default Application;\nUsando um Wrapper
Alternativamente, você pode instalar o nullstack-google-analytics como uma dependência:
\nnpm install nullstack-google-analytics\nimport Nullstack from 'nullstack';\nimport GoogleAnalytics from 'nullstack-google-analytics';\n\nclass Application extends Nullstack {\n\n // ...\n\n render() {\n return (\n <main>\n <GoogleAnalytics id=\"SUBSTITUA_COM_SEU_ID_DO_GOOGLE_ANALYTICS\" />\n </main>\n )\n }\n\n\n}\n\nexport default Application;\nPróximo Passo
⚔ Aprenda como usar o Facebook Pixel com o Nullstack.
\n","description":"Aproveite as vantagens do contexto e dos eventos personalizados para criar um componente que envia eventos GTAG dinamicamente."},"n-0-0-13":{},"n-0-0-15":{},"n-0-0-16":{"locale":"pt-BR","i18n":{"nullachan":{"alt":"Nulla-Chan","title":"Nulla-Chan: Waifu oficial do Nullstack"},"links":[{"title":"YouTube","href":"https://www.youtube.com/channel/UCUNPaxoppH3lu6JTrUX78Ww"},{"title":"Twitter","href":"https://twitter.com/nullstackapp"},{"title":"GitHub","href":"https://github.com/nullstack"}]}}}, "page": {"image":"/image-1200x630.png","status":200,"title":"Google Analytics - Nullstack","description":"Aproveite as vantagens do contexto e dos eventos personalizados para criar um componente que envia eventos GTAG dinamicamente."}} \ No newline at end of file diff --git a/docs/pt-br/como-usar-mongodb-com-nullstack.html b/docs/pt-br/como-usar-mongodb-com-nullstack.html deleted file mode 100644 index 4fb3f74e..00000000 --- a/docs/pt-br/como-usar-mongodb-com-nullstack.html +++ /dev/null @@ -1,105 +0,0 @@ - - - - - -Como usar MongoDB
De acordo com mongodb.com:
-"O MongoDB é um banco de dados distribuído de propósito geral, baseado em documentos, criado para desenvolvedores de aplicativos modernos e para a era da nuvem."
-Você pode usar qualquer banco de dados com Nullstack, mas a integração javascript e flexibilidade do MongoDB parece especialmente boa com aplicativos Nullstack.
-Instale o driver MongoDB do npm:
-npm install mongodb
-Configure as credenciais do banco de dados usando secrets.
O último passo é simplesmente atribuir a conexão do banco de dados ao contexto do servidor.
-import Nullstack from 'nullstack';
-import {MongoClient} from 'mongodb';
-
-class Application extends Nullstack {
-
- static async start(context) {
- const {secrets} = context;
- secrets.development.databaseHost = 'mongodb://localhost:27017/dbname';
- secrets.databaseName = 'dbname';
- await this.startDatabase(context);
- }
-
- static async startDatabase(context) {
- const {secrets} = context;
- const databaseClient = new MongoClient(secrets.databaseHost);
- await databaseClient.connect();
- context.database = await databaseClient.db(secrets.databaseName);
- }
-
-}
-
-export default Application;
-O exemplo acima tornará a chave database disponível para todas as funções do servidor.
import Nullstack from 'nullstack';
-
-class BooksList extends Nullstack {
-
- books = [];
-
- static async getBooks({database}) {
- return await database.collection('books').find().toArray();
- }
-
- async initiate() {
- this.books = await this.getBooks();
- }
-
- // ...
-
-}
-
-export default BooksList;
-Próximo Passo
⚔ Aprenda como usar Google Analytics no Nullstack.
-Como usar MongoDB
De acordo com mongodb.com:
-"O MongoDB é um banco de dados distribuído de propósito geral, baseado em documentos, criado para desenvolvedores de aplicativos modernos e para a era da nuvem."
-Você pode usar qualquer banco de dados com Nullstack, mas a integração javascript e flexibilidade do MongoDB parece especialmente boa com aplicativos Nullstack.
-Instale o driver MongoDB do npm:
-npm install mongodb
-Configure as credenciais do banco de dados usando secrets.
O último passo é simplesmente atribuir a conexão do banco de dados ao contexto do servidor.
-import Nullstack from 'nullstack';
-import {MongoClient} from 'mongodb';
-
-class Application extends Nullstack {
-
- static async start(context) {
- const {secrets} = context;
- secrets.development.databaseHost = 'mongodb://localhost:27017/dbname';
- secrets.databaseName = 'dbname';
- await this.startDatabase(context);
- }
-
- static async startDatabase(context) {
- const {secrets} = context;
- const databaseClient = new MongoClient(secrets.databaseHost);
- await databaseClient.connect();
- context.database = await databaseClient.db(secrets.databaseName);
- }
-
-}
-
-export default Application;
-O exemplo acima tornará a chave database disponível para todas as funções do servidor.
import Nullstack from 'nullstack';
-
-class BooksList extends Nullstack {
-
- books = [];
-
- static async getBooks({database}) {
- return await database.collection('books').find().toArray();
- }
-
- async initiate() {
- this.books = await this.getBooks();
- }
-
- // ...
-
-}
-
-export default BooksList;
-Próximo Passo
⚔ Aprenda como usar Google Analytics no Nullstack.
-De acordo com mongodb.com:
\n"O MongoDB é um banco de dados distribuído de propósito geral, baseado em documentos, criado para desenvolvedores de aplicativos modernos e para a era da nuvem."
\nVocê pode usar qualquer banco de dados com Nullstack, mas a integração javascript e flexibilidade do MongoDB parece especialmente boa com aplicativos Nullstack.
\nInstale o driver MongoDB do npm:
\nnpm install mongodb\nConfigure as credenciais do banco de dados usando secrets.
O último passo é simplesmente atribuir a conexão do banco de dados ao contexto do servidor.
\nimport Nullstack from 'nullstack';\nimport {MongoClient} from 'mongodb';\n\nclass Application extends Nullstack {\n\n static async start(context) {\n const {secrets} = context;\n secrets.development.databaseHost = 'mongodb://localhost:27017/dbname';\n secrets.databaseName = 'dbname';\n await this.startDatabase(context);\n }\n\n static async startDatabase(context) {\n const {secrets} = context;\n const databaseClient = new MongoClient(secrets.databaseHost);\n await databaseClient.connect();\n context.database = await databaseClient.db(secrets.databaseName);\n }\n\n}\n\nexport default Application;\nO exemplo acima tornará a chave database disponível para todas as funções do servidor.
import Nullstack from 'nullstack';\n\nclass BooksList extends Nullstack {\n\n books = [];\n\n static async getBooks({database}) {\n return await database.collection('books').find().toArray();\n }\n\n async initiate() {\n this.books = await this.getBooks();\n }\n\n // ...\n\n}\n\nexport default BooksList;\nPróximo Passo
⚔ Aprenda como usar Google Analytics no Nullstack.
\n","description":"Você pode usar qualquer banco de dados com Nullstack, mas a integração javascript e flexibilidade do MongoDB parece especialmente boa com aplicativos Nullstack"},"n-0-0-13":{},"n-0-0-15":{},"n-0-0-16":{"locale":"pt-BR","i18n":{"nullachan":{"alt":"Nulla-Chan","title":"Nulla-Chan: Waifu oficial do Nullstack"},"links":[{"title":"YouTube","href":"https://www.youtube.com/channel/UCUNPaxoppH3lu6JTrUX78Ww"},{"title":"Twitter","href":"https://twitter.com/nullstackapp"},{"title":"GitHub","href":"https://github.com/nullstack"}]}}}, "page": {"image":"/image-1200x630.png","status":200,"title":"Como usar MongoDB - Nullstack","description":"Você pode usar qualquer banco de dados com Nullstack, mas a integração javascript e flexibilidade do MongoDB parece especialmente boa com aplicativos Nullstack"}} \ No newline at end of file diff --git a/docs/pt-br/componentes-com-estado.html b/docs/pt-br/componentes-com-estado.html deleted file mode 100644 index e4eada75..00000000 --- a/docs/pt-br/componentes-com-estado.html +++ /dev/null @@ -1,179 +0,0 @@ - - - - - -Componentes com estado
Um framework web full-stack produtivo não deve forçar você a pensar sobre detalhes de estrutura.
-Nullstack assume o controle de suas subclasses e gera um proxy para cada instância.
-Quando você invoca qualquer coisa em sua classe, você está na verdade dizendo ao Nullstack o que fazer com o ambiente nos bastidores.
-Isso permite que você use operações de javascript vanilla como atribuir a uma variável e ver o reflexo no dom.
-Mutabilidade
Você pode modificar variáveis de instância para atualizar o estado do seu aplicativo.
-As funções são vinculadas automaticamente ao proxy da instância e podem ser passadas como referência para eventos.
-Os eventos são declarados como atributos HTML normais.
-import Nullstack from "nullstack";
-
-class Counter extends Nullstack {
-
- count = 0;
-
- increment() {
- this.count++;
- }
-
- render() {
- return (
- <button onclick={this.increment}>
- {this.count}
- </button>
- )
- }
-
-}
-
-export default Counter;
---💡 As atualizações são feitas em lotes, geralmente enquanto aguardam chamadas assíncronas, portanto, fazer várias atribuições não tem custos de desempenho!
-
Objeto de Eventos
Você pode criar atalho em eventos que são simples atribuições passando um objeto para o evento.
-Cada chave do objeto será atribuída à instância.
-import Nullstack from "nullstack";
-
-class Counter extends Nullstack {
-
- count = 0;
-
- render() {
- return (
- <button onclick={{ count: this.count + 1 }}>
- {this.count}
- </button>
- )
- }
-
-}
-
-export default Counter;
-Fonte de Evento
Por padrão, os eventos referem-se a this quando você passa um objeto.
Você pode usar o atributo source para definir qual objeto receberá as atribuições.
import Nullstack from "nullstack";
-
-class Paginator extends Nullstack {
-
- render({ params }) {
- return (
- <button source={params} onclick={{ page: 1 }}>
- Primeira Página
- </button>
- )
- }
-
-}
-
-export default Paginator;
---✨ Aprenda mais sobre a chave
-paramsdo contexto.
--💡 Se você não declarar uma fonte para o evento, o Nullstack injetará
-source={this}no tempo de transpilação para pular completamente o processo de pesquisa em tempo de execução!
Contexto de Evento
Os atributos do elemento-alvo do evento serão mesclados ao context da instância e podem ser desestruturados na assinatura da função.
import Nullstack from "nullstack";
-
-class Counter extends Nullstack {
-
- count = 0;
-
- increment({ delta }) {
- this.count += delta;
- }
-
- render() {
- return (
- <button onclick={this.increment} delta={2}>
- {this.count}
- </button>
- )
- }
-
-}
-
-export default Counter;
---💡 Qualquer atributo com valor primitivo será adicionado ao DOM.
-
--✨ Considere usar atributos
-datapara tornar seu HTML válido.
Evento Original
O comportamento padrão do navegador é impedido por padrão.
-Você pode desativar isso declarando um atributo default para o elemento de evento.
Uma referência ao evento original é sempre mesclada com o contexto da função.
-import Nullstack from "nullstack";
-
-class Form extends Nullstack {
- submit({ event }) {
- event.preventDefault();
- }
-
- render() {
- return (
- <form onsubmit={this.submit} default>
- <button> Enviar </button>
- </form>
- )
- }
-}
-
-export default Form;
-Próximos passos
⚔ Aprenda sobre o ciclo da vida full-stack.
-Componentes com estado
Um framework web full-stack produtivo não deve forçar você a pensar sobre detalhes de estrutura.
-Nullstack assume o controle de suas subclasses e gera um proxy para cada instância.
-Quando você invoca qualquer coisa em sua classe, você está na verdade dizendo ao Nullstack o que fazer com o ambiente nos bastidores.
-Isso permite que você use operações de javascript vanilla como atribuir a uma variável e ver o reflexo no dom.
-Mutabilidade
Você pode modificar variáveis de instância para atualizar o estado do seu aplicativo.
-As funções são vinculadas automaticamente ao proxy da instância e podem ser passadas como referência para eventos.
-Os eventos são declarados como atributos HTML normais.
-import Nullstack from "nullstack";
-
-class Counter extends Nullstack {
-
- count = 0;
-
- increment() {
- this.count++;
- }
-
- render() {
- return (
- <button onclick={this.increment}>
- {this.count}
- </button>
- )
- }
-
-}
-
-export default Counter;
---💡 As atualizações são feitas em lotes, geralmente enquanto aguardam chamadas assíncronas, portanto, fazer várias atribuições não tem custos de desempenho!
-
Objeto de Eventos
Você pode criar atalho em eventos que são simples atribuições passando um objeto para o evento.
-Cada chave do objeto será atribuída à instância.
-import Nullstack from "nullstack";
-
-class Counter extends Nullstack {
-
- count = 0;
-
- render() {
- return (
- <button onclick={{ count: this.count + 1 }}>
- {this.count}
- </button>
- )
- }
-
-}
-
-export default Counter;
-Fonte de Evento
Por padrão, os eventos referem-se a this quando você passa um objeto.
Você pode usar o atributo source para definir qual objeto receberá as atribuições.
import Nullstack from "nullstack";
-
-class Paginator extends Nullstack {
-
- render({ params }) {
- return (
- <button source={params} onclick={{ page: 1 }}>
- Primeira Página
- </button>
- )
- }
-
-}
-
-export default Paginator;
---✨ Aprenda mais sobre a chave
-paramsdo contexto.
--💡 Se você não declarar uma fonte para o evento, o Nullstack injetará
-source={this}no tempo de transpilação para pular completamente o processo de pesquisa em tempo de execução!
Contexto de Evento
Os atributos do elemento-alvo do evento serão mesclados ao context da instância e podem ser desestruturados na assinatura da função.
import Nullstack from "nullstack";
-
-class Counter extends Nullstack {
-
- count = 0;
-
- increment({ delta }) {
- this.count += delta;
- }
-
- render() {
- return (
- <button onclick={this.increment} delta={2}>
- {this.count}
- </button>
- )
- }
-
-}
-
-export default Counter;
---💡 Qualquer atributo com valor primitivo será adicionado ao DOM.
-
--✨ Considere usar atributos
-datapara tornar seu HTML válido.
Evento Original
O comportamento padrão do navegador é impedido por padrão.
-Você pode desativar isso declarando um atributo default para o elemento de evento.
Uma referência ao evento original é sempre mesclada com o contexto da função.
-import Nullstack from "nullstack";
-
-class Form extends Nullstack {
- submit({ event }) {
- event.preventDefault();
- }
-
- render() {
- return (
- <form onsubmit={this.submit} default>
- <button> Enviar </button>
- </form>
- )
- }
-}
-
-export default Form;
-Próximos passos
⚔ Aprenda sobre o ciclo da vida full-stack.
-Um framework web full-stack produtivo não deve forçar você a pensar sobre detalhes de estrutura.
\nNullstack assume o controle de suas subclasses e gera um proxy para cada instância.
\nQuando você invoca qualquer coisa em sua classe, você está na verdade dizendo ao Nullstack o que fazer com o ambiente nos bastidores.
\nIsso permite que você use operações de javascript vanilla como atribuir a uma variável e ver o reflexo no dom.
\nMutabilidade
Você pode modificar variáveis de instância para atualizar o estado do seu aplicativo.
\nAs funções são vinculadas automaticamente ao proxy da instância e podem ser passadas como referência para eventos.
\nOs eventos são declarados como atributos HTML normais.
\nimport Nullstack from \"nullstack\";\n\nclass Counter extends Nullstack {\n\n count = 0;\n\n increment() {\n this.count++;\n }\n\n render() {\n return (\n <button onclick={this.increment}>\n {this.count}\n </button>\n )\n }\n\n}\n\nexport default Counter;\n\n\n💡 As atualizações são feitas em lotes, geralmente enquanto aguardam chamadas assíncronas, portanto, fazer várias atribuições não tem custos de desempenho!
\n
Objeto de Eventos
Você pode criar atalho em eventos que são simples atribuições passando um objeto para o evento.
\nCada chave do objeto será atribuída à instância.
\nimport Nullstack from \"nullstack\";\n\nclass Counter extends Nullstack {\n\n count = 0;\n\n render() {\n return (\n <button onclick={{ count: this.count + 1 }}>\n {this.count}\n </button>\n )\n }\n\n}\n\nexport default Counter;\nFonte de Evento
Por padrão, os eventos referem-se a this quando você passa um objeto.
Você pode usar o atributo source para definir qual objeto receberá as atribuições.
import Nullstack from \"nullstack\";\n\nclass Paginator extends Nullstack {\n\n render({ params }) {\n return (\n <button source={params} onclick={{ page: 1 }}>\n Primeira Página\n </button>\n )\n }\n\n}\n\nexport default Paginator;\n\n\n✨ Aprenda mais sobre a chave
\nparamsdo contexto.
\n\n💡 Se você não declarar uma fonte para o evento, o Nullstack injetará
\nsource={this}no tempo de transpilação para pular completamente o processo de pesquisa em tempo de execução!
Contexto de Evento
Os atributos do elemento-alvo do evento serão mesclados ao context da instância e podem ser desestruturados na assinatura da função.
import Nullstack from \"nullstack\";\n\nclass Counter extends Nullstack {\n\n count = 0;\n\n increment({ delta }) {\n this.count += delta;\n }\n\n render() {\n return (\n <button onclick={this.increment} delta={2}>\n {this.count}\n </button>\n )\n }\n\n}\n\nexport default Counter;\n\n\n💡 Qualquer atributo com valor primitivo será adicionado ao DOM.
\n
\n\n✨ Considere usar atributos
\ndatapara tornar seu HTML válido.
Evento Original
O comportamento padrão do navegador é impedido por padrão.
\nVocê pode desativar isso declarando um atributo default para o elemento de evento.
Uma referência ao evento original é sempre mesclada com o contexto da função.
\nimport Nullstack from \"nullstack\";\n\nclass Form extends Nullstack {\n submit({ event }) {\n event.preventDefault();\n }\n\n render() {\n return (\n <form onsubmit={this.submit} default>\n <button> Enviar </button>\n </form>\n )\n }\n}\n\nexport default Form;\nPróximos passos
⚔ Aprenda sobre o ciclo da vida full-stack.
\n","description":"Um framework web full-stack produtivo não deve forçar você a pensar sobre detalhes de estrutura"},"n-0-0-13":{},"n-0-0-15":{},"n-0-0-16":{"locale":"pt-BR","i18n":{"nullachan":{"alt":"Nulla-Chan","title":"Nulla-Chan: Waifu oficial do Nullstack"},"links":[{"title":"YouTube","href":"https://www.youtube.com/channel/UCUNPaxoppH3lu6JTrUX78Ww"},{"title":"Twitter","href":"https://twitter.com/nullstackapp"},{"title":"GitHub","href":"https://github.com/nullstack"}]}}}, "page": {"image":"/image-1200x630.png","status":200,"title":"Componentes com estado - Nullstack","description":"Um framework web full-stack produtivo não deve forçar você a pensar sobre detalhes de estrutura"}} \ No newline at end of file diff --git a/docs/pt-br/componentes-renderizaveis.html b/docs/pt-br/componentes-renderizaveis.html deleted file mode 100644 index bee68210..00000000 --- a/docs/pt-br/componentes-renderizaveis.html +++ /dev/null @@ -1,309 +0,0 @@ - - - - - -Componentes renderizáveis
O componente mais simples que você pode fazer é um componente renderizável.
-Componentes renderizáveis são muito semelhantes aos componentes da Web que fornecem a capacidade de criar novas tags HTML que atalham um grupo de outras tags HTML.
-Crie um arquivo em sua pasta src com o nome de seu componente e com a extensão .njs.
Neste exemplo, vai ser chamado helloworld.njs.
Tudo o que você precisa fazer é importar nullstack ou qualquer uma das suas subclasses e estender sua classe dele, definir um método de instância chamado render que retorna qualquer JSX e exporte o componente.
--✨ Instale a extensão oficial Nullstack para VSCode para gerar classes com snippets.
-
import Nullstack from "nullstack";
-
-class HelloWorld extends Nullstack {
-
- render() {
- return (
- <div> Olá Mundo </div>
- )
- }
-
-}
-
-export default HelloWorld;
-O código acima apenas declara o componente, você ainda tem que usá-lo.
-Importando o componente em seu aplicativo, temos a capacidade de usar uma nova tag em sua renderização.
-Esta tag será substituída pelo que você retornou no método render do componente.
import Nullstack from "nullstack";
-
-import "./Application.scss";
-
-import HelloWorld from "./HelloWorld";
-
-class Application extends Nullstack {
- // ...
-
- render({ page }) {
- return (
- <main>
- <h1> {page.title} </h1>
- <a href="https://nullstack.app/documentation" target="_blank">
- Read the documentation
- </a>
- <HelloWorld />
- </main>
- )
- }
-}
-
-export default Application;
-Usando atributos HTML.
Nullstack JSX se desvia um pouco das especificações.
-Você pode usar os atributos HTML normais como class e for diretamente.
<label for="input" class="nao-me-rotule"> Eu sou um rótulo </label>
-Componentes Headless
Se você deseja pular a renderização do componente, você pode simplesmente retornar false da renderização.
import Nullstack from "nullstack";
-
-class Headless extends Nullstack {
-
- render() {
- return false;
- }
-
-}
-
-export default Headless;
-Isso alocará o espaço no DOM para quando você decidir renderizar a marcação lá.
-Isso também é útil para renderização condicional.
-Se tudo o que você deseja fazer é gerar um componente invisível, você pode ignorar a definição do método de renderização.
-Componentes internos
Em vez de criar um novo componente apenas para organizar a divisão de código, você pode criar um componente interno.
-Componentes internos são quaisquer métodos cujo nome seja iniciado com render seguido por um caractere maiúsculo.
Componentes internos compartilham a mesma instância e escopo, pois o componente principal, portanto, são muito convenientes para evitar problemas como adereços de perfuração.
-Para invocar o componente interno, use uma tag JSX com o nome do método sem o prefixo render.
import Nullstack from "nullstack"
-
-class Post extends Nullstack {
-
- renderArticle() {
- return (
- <article> Conteúdo </article>
- )
- }
-
- renderAside() {
- return (
- <aside> Conteúdo Relacionado </aside>
- )
- }
-
- render() {
- return (
- <div>
- <Article />
- <Aside />
- </div>
- )
- }
-
-}
-
-export default HelloWorld;
---💡 Nullstack injetará uma referência constante à função no tempo de transpilação, a fim de ignorar completamente o processo de pesquisa de tempo de execução!
-
Atributos booleanos
Os atributos podem ser atribuídos como booleanos.
-Quando o valor é false, o atributo não será renderizado.
Quando o valor for true, ele será processado como um atributo booleano sem um valor de string.
<button disabled={false}> Botão </button>
-Você pode abreviar atributos quando sabe que o valor será sempre verdadeiro.
-<button disabled> Botão </button>
---✨ Aprender mais sobre atributos.
-
Tag do elemento
Se você precisar decidir o nome da tag em tempo de execução, pode usar a tag do elemento e definir o atributo da tag condicionalmente.
-<element tag={!!link ? "a" : "span"} href={link || false}>
- algum texto arbitrário
-</element>
-Quando o atributo tag é omitido, Nullstack assumirá como padrão um div.
Elementos SVG
O SVG pode ser usado como se fosse qualquer tag HTML normal.
-Você pode manipular o SVG usando atributos e eventos normalmente.
-<svg height={this.size} viewBox="0 0 100 100">
- <circle cx="50" cy="50" r="40" onclick={this.grow} />
-</svg>
---✨ Aprender mais sobre eventos.
-
Componentes com filhos
Seu componente pode ser invocado passando um bloco de conteúdo.
-<Header>
- <h1> Olá Mundo</h1>
-</Header>
-Isso não renderiza automaticamente o bloco, pois não saberia onde colocá-lo.
-Você pode desestruturar os filhos no método de renderização e colocá-los em sua marcação.
-import Nullstack from "nullstack";
-
-class Header extends Nullstack {
-
- render({ children }) {
- return (
- <div>{children}</div>
- )
- }
-
-}
-
-export default Header;
---✨ Isso é possível porque a chave
-childrenfaz parte do contexto da instância.
Listas
Você pode mapear listas sem declarar uma key.
As listas que podem mudar de comprimento devem ser agrupadas em um elemento pai apenas para elas.
-<ul>
- {list.map((item) => (
- <li>{item.name}</li>
- ))}
-</ul>
-Você pode emular uma lista de tamanho fixo, retornando false em vez de um elemento para reservar espaço no Dom.
{list.map((item) => (
- item.visible ? <div>{item.name}</div> : false
-)}
-É uma boa prática usar componentes internos combinados com listas para limpar seu código.
-import Nullstack from "nullstack";
-
-class List extends Nullstack {
- items = [
- { visible: true, number: 1 },
- { visible: false, number: 2 },
- { visible: true, number: 3 },
- ]
-
- renderItem({ visible, number }) {
- if (!visible) return false;
- return <li> {number} </li>
- }
-
- render() {
- return (
- <ul>
- {this.items.map((item) => (
- <Item {...item} />
- ))}
- </ul>
- )
- }
-}
-
-export default List;
---✨ Às vezes, você notará chaves no mapa. Saiba mais sobre a key da instância.
-
HTML interno
Você pode definir o HTML interno de um elemento com o atributo html.
Links dentro da string HTML serão substituídos por Âncoras Roteáveis.
-import Nullstack from "nullstack";
-
-class Post extends Nullstack {
-
- content = `
- <h1> Este é um post </h1>
- <a href="/other-post">
- Confira este outro post
- </a>
- `;
-
- render() {
- return (
- <article html={this.content} />
- )
- }
-
-}
-
-export default Post;
---🔥 Tome cuidado! Ao usar o HTML gerado pelo usuário, você está em risco de injeção de script
-
A tag head
Componentes renderizáveis podem renderizar dentro da tag head um número ilimitado de vezes em qualquer profundidade do aplicativo.
A tag head só será atualizada durante o processo de renderização no servidor e mudanças serão ignorados após o processo de hidratação.
import Nullstack from 'nullstack';
-
-class Application extends Nullstack {
-
- // ...
-
- render() {
- return (
- <main>
- <div>
- <head>
- <link rel="preconnect" href="https://www.googletagmanager.com" />
- </head>
- </div>
- <head>
- <link rel="preload" href="/roboto-v20-latin-300.woff2" as="font" type="font/woff2" crossorigin />
- <link rel="preload" href="/crete-round-v9-latin-regular.woff2" as="font" type="font/woff2" crossorigin />
- </head>
- </main>
- )
- }
-
-}
-
-export default Application;
---🔥 Você não deve usar a tag
-headpara atualizar metatags que o Nullstack já controla.
Próxima Etapa
⚔ Adicione estado ao seu componente usando componentes com estado.
-Componentes renderizáveis
O componente mais simples que você pode fazer é um componente renderizável.
-Componentes renderizáveis são muito semelhantes aos componentes da Web que fornecem a capacidade de criar novas tags HTML que atalham um grupo de outras tags HTML.
-Crie um arquivo em sua pasta src com o nome de seu componente e com a extensão .njs.
Neste exemplo, vai ser chamado helloworld.njs.
Tudo o que você precisa fazer é importar nullstack ou qualquer uma das suas subclasses e estender sua classe dele, definir um método de instância chamado render que retorna qualquer JSX e exporte o componente.
--✨ Instale a extensão oficial Nullstack para VSCode para gerar classes com snippets.
-
import Nullstack from "nullstack";
-
-class HelloWorld extends Nullstack {
-
- render() {
- return (
- <div> Olá Mundo </div>
- )
- }
-
-}
-
-export default HelloWorld;
-O código acima apenas declara o componente, você ainda tem que usá-lo.
-Importando o componente em seu aplicativo, temos a capacidade de usar uma nova tag em sua renderização.
-Esta tag será substituída pelo que você retornou no método render do componente.
import Nullstack from "nullstack";
-
-import "./Application.scss";
-
-import HelloWorld from "./HelloWorld";
-
-class Application extends Nullstack {
- // ...
-
- render({ page }) {
- return (
- <main>
- <h1> {page.title} </h1>
- <a href="https://nullstack.app/documentation" target="_blank">
- Read the documentation
- </a>
- <HelloWorld />
- </main>
- )
- }
-}
-
-export default Application;
-Usando atributos HTML.
Nullstack JSX se desvia um pouco das especificações.
-Você pode usar os atributos HTML normais como class e for diretamente.
<label for="input" class="nao-me-rotule"> Eu sou um rótulo </label>
-Componentes Headless
Se você deseja pular a renderização do componente, você pode simplesmente retornar false da renderização.
import Nullstack from "nullstack";
-
-class Headless extends Nullstack {
-
- render() {
- return false;
- }
-
-}
-
-export default Headless;
-Isso alocará o espaço no DOM para quando você decidir renderizar a marcação lá.
-Isso também é útil para renderização condicional.
-Se tudo o que você deseja fazer é gerar um componente invisível, você pode ignorar a definição do método de renderização.
-Componentes internos
Em vez de criar um novo componente apenas para organizar a divisão de código, você pode criar um componente interno.
-Componentes internos são quaisquer métodos cujo nome seja iniciado com render seguido por um caractere maiúsculo.
Componentes internos compartilham a mesma instância e escopo, pois o componente principal, portanto, são muito convenientes para evitar problemas como adereços de perfuração.
-Para invocar o componente interno, use uma tag JSX com o nome do método sem o prefixo render.
import Nullstack from "nullstack"
-
-class Post extends Nullstack {
-
- renderArticle() {
- return (
- <article> Conteúdo </article>
- )
- }
-
- renderAside() {
- return (
- <aside> Conteúdo Relacionado </aside>
- )
- }
-
- render() {
- return (
- <div>
- <Article />
- <Aside />
- </div>
- )
- }
-
-}
-
-export default HelloWorld;
---💡 Nullstack injetará uma referência constante à função no tempo de transpilação, a fim de ignorar completamente o processo de pesquisa de tempo de execução!
-
Atributos booleanos
Os atributos podem ser atribuídos como booleanos.
-Quando o valor é false, o atributo não será renderizado.
Quando o valor for true, ele será processado como um atributo booleano sem um valor de string.
<button disabled={false}> Botão </button>
-Você pode abreviar atributos quando sabe que o valor será sempre verdadeiro.
-<button disabled> Botão </button>
---✨ Aprender mais sobre atributos.
-
Tag do elemento
Se você precisar decidir o nome da tag em tempo de execução, pode usar a tag do elemento e definir o atributo da tag condicionalmente.
-<element tag={!!link ? "a" : "span"} href={link || false}>
- algum texto arbitrário
-</element>
-Quando o atributo tag é omitido, Nullstack assumirá como padrão um div.
Elementos SVG
O SVG pode ser usado como se fosse qualquer tag HTML normal.
-Você pode manipular o SVG usando atributos e eventos normalmente.
-<svg height={this.size} viewBox="0 0 100 100">
- <circle cx="50" cy="50" r="40" onclick={this.grow} />
-</svg>
---✨ Aprender mais sobre eventos.
-
Componentes com filhos
Seu componente pode ser invocado passando um bloco de conteúdo.
-<Header>
- <h1> Olá Mundo</h1>
-</Header>
-Isso não renderiza automaticamente o bloco, pois não saberia onde colocá-lo.
-Você pode desestruturar os filhos no método de renderização e colocá-los em sua marcação.
-import Nullstack from "nullstack";
-
-class Header extends Nullstack {
-
- render({ children }) {
- return (
- <div>{children}</div>
- )
- }
-
-}
-
-export default Header;
---✨ Isso é possível porque a chave
-childrenfaz parte do contexto da instância.
Listas
Você pode mapear listas sem declarar uma key.
As listas que podem mudar de comprimento devem ser agrupadas em um elemento pai apenas para elas.
-<ul>
- {list.map((item) => (
- <li>{item.name}</li>
- ))}
-</ul>
-Você pode emular uma lista de tamanho fixo, retornando false em vez de um elemento para reservar espaço no Dom.
{list.map((item) => (
- item.visible ? <div>{item.name}</div> : false
-)}
-É uma boa prática usar componentes internos combinados com listas para limpar seu código.
-import Nullstack from "nullstack";
-
-class List extends Nullstack {
- items = [
- { visible: true, number: 1 },
- { visible: false, number: 2 },
- { visible: true, number: 3 },
- ]
-
- renderItem({ visible, number }) {
- if (!visible) return false;
- return <li> {number} </li>
- }
-
- render() {
- return (
- <ul>
- {this.items.map((item) => (
- <Item {...item} />
- ))}
- </ul>
- )
- }
-}
-
-export default List;
---✨ Às vezes, você notará chaves no mapa. Saiba mais sobre a key da instância.
-
HTML interno
Você pode definir o HTML interno de um elemento com o atributo html.
Links dentro da string HTML serão substituídos por Âncoras Roteáveis.
-import Nullstack from "nullstack";
-
-class Post extends Nullstack {
-
- content = `
- <h1> Este é um post </h1>
- <a href="/other-post">
- Confira este outro post
- </a>
- `;
-
- render() {
- return (
- <article html={this.content} />
- )
- }
-
-}
-
-export default Post;
---🔥 Tome cuidado! Ao usar o HTML gerado pelo usuário, você está em risco de injeção de script
-
A tag head
Componentes renderizáveis podem renderizar dentro da tag head um número ilimitado de vezes em qualquer profundidade do aplicativo.
A tag head só será atualizada durante o processo de renderização no servidor e mudanças serão ignorados após o processo de hidratação.
import Nullstack from 'nullstack';
-
-class Application extends Nullstack {
-
- // ...
-
- render() {
- return (
- <main>
- <div>
- <head>
- <link rel="preconnect" href="https://www.googletagmanager.com" />
- </head>
- </div>
- <head>
- <link rel="preload" href="/roboto-v20-latin-300.woff2" as="font" type="font/woff2" crossorigin />
- <link rel="preload" href="/crete-round-v9-latin-regular.woff2" as="font" type="font/woff2" crossorigin />
- </head>
- </main>
- )
- }
-
-}
-
-export default Application;
---🔥 Você não deve usar a tag
-headpara atualizar metatags que o Nullstack já controla.
Próxima Etapa
⚔ Adicione estado ao seu componente usando componentes com estado.
-O componente mais simples que você pode fazer é um componente renderizável.
\nComponentes renderizáveis são muito semelhantes aos componentes da Web que fornecem a capacidade de criar novas tags HTML que atalham um grupo de outras tags HTML.
\nCrie um arquivo em sua pasta src com o nome de seu componente e com a extensão .njs.
Neste exemplo, vai ser chamado helloworld.njs.
Tudo o que você precisa fazer é importar nullstack ou qualquer uma das suas subclasses e estender sua classe dele, definir um método de instância chamado render que retorna qualquer JSX e exporte o componente.
\n\n✨ Instale a extensão oficial Nullstack para VSCode para gerar classes com snippets.
\n
import Nullstack from \"nullstack\";\n\nclass HelloWorld extends Nullstack {\n\n render() {\n return (\n <div> Olá Mundo </div>\n )\n }\n\n}\n\nexport default HelloWorld;\nO código acima apenas declara o componente, você ainda tem que usá-lo.
\nImportando o componente em seu aplicativo, temos a capacidade de usar uma nova tag em sua renderização.
\nEsta tag será substituída pelo que você retornou no método render do componente.
import Nullstack from \"nullstack\";\n\nimport \"./Application.scss\";\n\nimport HelloWorld from \"./HelloWorld\";\n\nclass Application extends Nullstack {\n // ...\n\n render({ page }) {\n return (\n <main>\n <h1> {page.title} </h1>\n <a href=\"https://nullstack.app/documentation\" target=\"_blank\">\n Read the documentation\n </a>\n <HelloWorld />\n </main>\n )\n }\n}\n\nexport default Application;\nUsando atributos HTML.
Nullstack JSX se desvia um pouco das especificações.
\nVocê pode usar os atributos HTML normais como class e for diretamente.
<label for=\"input\" class=\"nao-me-rotule\"> Eu sou um rótulo </label>\nComponentes Headless
Se você deseja pular a renderização do componente, você pode simplesmente retornar false da renderização.
import Nullstack from \"nullstack\";\n\nclass Headless extends Nullstack {\n\n render() {\n return false;\n }\n\n}\n\nexport default Headless;\nIsso alocará o espaço no DOM para quando você decidir renderizar a marcação lá.
\nIsso também é útil para renderização condicional.
\nSe tudo o que você deseja fazer é gerar um componente invisível, você pode ignorar a definição do método de renderização.
\nComponentes internos
Em vez de criar um novo componente apenas para organizar a divisão de código, você pode criar um componente interno.
\nComponentes internos são quaisquer métodos cujo nome seja iniciado com render seguido por um caractere maiúsculo.
Componentes internos compartilham a mesma instância e escopo, pois o componente principal, portanto, são muito convenientes para evitar problemas como adereços de perfuração.
\nPara invocar o componente interno, use uma tag JSX com o nome do método sem o prefixo render.
import Nullstack from \"nullstack\"\n\nclass Post extends Nullstack {\n\n renderArticle() {\n return (\n <article> Conteúdo </article>\n )\n }\n\n renderAside() {\n return (\n <aside> Conteúdo Relacionado </aside>\n )\n }\n\n render() {\n return (\n <div>\n <Article />\n <Aside />\n </div>\n )\n }\n\n}\n\nexport default HelloWorld;\n\n\n💡 Nullstack injetará uma referência constante à função no tempo de transpilação, a fim de ignorar completamente o processo de pesquisa de tempo de execução!
\n
Atributos booleanos
Os atributos podem ser atribuídos como booleanos.
\nQuando o valor é false, o atributo não será renderizado.
Quando o valor for true, ele será processado como um atributo booleano sem um valor de string.
<button disabled={false}> Botão </button>\nVocê pode abreviar atributos quando sabe que o valor será sempre verdadeiro.
\n<button disabled> Botão </button>\n\n\n✨ Aprender mais sobre atributos.
\n
Tag do elemento
Se você precisar decidir o nome da tag em tempo de execução, pode usar a tag do elemento e definir o atributo da tag condicionalmente.
\n<element tag={!!link ? \"a\" : \"span\"} href={link || false}>\n algum texto arbitrário\n</element>\nQuando o atributo tag é omitido, Nullstack assumirá como padrão um div.
Elementos SVG
O SVG pode ser usado como se fosse qualquer tag HTML normal.
\nVocê pode manipular o SVG usando atributos e eventos normalmente.
\n<svg height={this.size} viewBox=\"0 0 100 100\">\n <circle cx=\"50\" cy=\"50\" r=\"40\" onclick={this.grow} />\n</svg>\n\n\n✨ Aprender mais sobre eventos.
\n
Componentes com filhos
Seu componente pode ser invocado passando um bloco de conteúdo.
\n<Header>\n <h1> Olá Mundo</h1>\n</Header>\nIsso não renderiza automaticamente o bloco, pois não saberia onde colocá-lo.
\nVocê pode desestruturar os filhos no método de renderização e colocá-los em sua marcação.
\nimport Nullstack from \"nullstack\";\n\nclass Header extends Nullstack {\n\n render({ children }) {\n return (\n <div>{children}</div>\n )\n }\n\n}\n\nexport default Header;\n\n\n✨ Isso é possível porque a chave
\nchildrenfaz parte do contexto da instância.
Listas
Você pode mapear listas sem declarar uma key.
As listas que podem mudar de comprimento devem ser agrupadas em um elemento pai apenas para elas.
\n<ul>\n {list.map((item) => (\n <li>{item.name}</li>\n ))}\n</ul>\nVocê pode emular uma lista de tamanho fixo, retornando false em vez de um elemento para reservar espaço no Dom.
{list.map((item) => (\n item.visible ? <div>{item.name}</div> : false\n)}\nÉ uma boa prática usar componentes internos combinados com listas para limpar seu código.
\nimport Nullstack from \"nullstack\";\n\nclass List extends Nullstack {\n items = [\n { visible: true, number: 1 },\n { visible: false, number: 2 },\n { visible: true, number: 3 },\n ]\n\n renderItem({ visible, number }) {\n if (!visible) return false;\n return <li> {number} </li>\n }\n\n render() {\n return (\n <ul>\n {this.items.map((item) => (\n <Item {...item} />\n ))}\n </ul>\n )\n }\n}\n\nexport default List;\n\n\n✨ Às vezes, você notará chaves no mapa. Saiba mais sobre a key da instância.
\n
HTML interno
Você pode definir o HTML interno de um elemento com o atributo html.
Links dentro da string HTML serão substituídos por Âncoras Roteáveis.
\nimport Nullstack from \"nullstack\";\n\nclass Post extends Nullstack {\n\n content = `\n <h1> Este é um post </h1>\n <a href=\"/other-post\">\n Confira este outro post\n </a>\n `;\n\n render() {\n return (\n <article html={this.content} />\n )\n }\n\n}\n\nexport default Post;\n\n\n🔥 Tome cuidado! Ao usar o HTML gerado pelo usuário, você está em risco de injeção de script
\n
A tag head
Componentes renderizáveis podem renderizar dentro da tag head um número ilimitado de vezes em qualquer profundidade do aplicativo.
A tag head só será atualizada durante o processo de renderização no servidor e mudanças serão ignorados após o processo de hidratação.
import Nullstack from 'nullstack';\n\nclass Application extends Nullstack {\n\n // ...\n\n render() {\n return (\n <main>\n <div>\n <head>\n <link rel=\"preconnect\" href=\"https://www.googletagmanager.com\" />\n </head>\n </div>\n <head>\n <link rel=\"preload\" href=\"/roboto-v20-latin-300.woff2\" as=\"font\" type=\"font/woff2\" crossorigin />\n <link rel=\"preload\" href=\"/crete-round-v9-latin-regular.woff2\" as=\"font\" type=\"font/woff2\" crossorigin />\n </head>\n </main>\n )\n }\n\n}\n\nexport default Application;\n\n\n🔥 Você não deve usar a tag
\nheadpara atualizar metatags que o Nullstack já controla.
Próxima Etapa
⚔ Adicione estado ao seu componente usando componentes com estado.
\n","description":"Componentes renderizáveis são muito semelhantes aos componentes da Web que fornecem a capacidade de criar novas tags HTML que atalham um grupo de outras tags HTML"},"n-0-0-13":{},"n-0-0-15":{},"n-0-0-16":{"locale":"pt-BR","i18n":{"nullachan":{"alt":"Nulla-Chan","title":"Nulla-Chan: Waifu oficial do Nullstack"},"links":[{"title":"YouTube","href":"https://www.youtube.com/channel/UCUNPaxoppH3lu6JTrUX78Ww"},{"title":"Twitter","href":"https://twitter.com/nullstackapp"},{"title":"GitHub","href":"https://github.com/nullstack"}]}}}, "page": {"image":"/image-1200x630.png","status":200,"title":"Componentes renderizáveis - Nullstack","description":"Componentes renderizáveis são muito semelhantes aos componentes da Web que fornecem a capacidade de criar novas tags HTML que atalham um grupo de outras tags HTML"}} \ No newline at end of file diff --git a/docs/pt-br/componentes.html b/docs/pt-br/componentes.html deleted file mode 100644 index df0feba6..00000000 --- a/docs/pt-br/componentes.html +++ /dev/null @@ -1,52 +0,0 @@ - - - - - -Componentes da Comunidade
Uma lista com curadoria de componentes Nullstack feitos pela comunidade.
Se você deseja adicionar um componente a esta lista, abra uma issue no github.
Integrações
Inputs Gerais
Inputs Brasileiros
🤘 Nullstack é BR porr@!
Componentes da Comunidade
Uma lista com curadoria de componentes Nullstack feitos pela comunidade.
Se você deseja adicionar um componente a esta lista, abra uma issue no github.
Integrações
Inputs Gerais
Inputs Brasileiros
🤘 Nullstack é BR porr@!
Contexto Data
-
-
- Tipo:
object
- - Origem: Contexto Componente -
- Disponibilidade: client -
- readonly no contexto do client -
Ele te dá informações sobre o conjunto de dados do elemento.
-Você pode usar esta chave para evitar poluir seu DOM com atributos inválidos.
---💡 Isso ajuda o Nullstack a definir atributos sem perder tempo validando-os.
-
Quaisquer atributos data-* receberão uma chave camelizada respectiva no objeto data.
Você pode atribuir atributos data ambos via data-* e uma chave data que aceita um objeto com chaves camelizadas.
A versão kebab também está disponível no contexto.
-import Nullstack from "nullstack"
-
-class ContextData extends Nullstack {
- count = 1
-
- calculate({ data }) {
- this.count = this.count * data.multiply + data.sum
- }
-
- renderInner(context) {
- const { data } = context
- return (
- <div data={data}>
- {data.frameworkName}é o mesmo que
- {context["data-framework-name"]}
- </div>
- )
- }
-
- render({ data }) {
- return (
- <div>
- <button onclick={this.calculate} data-multiply={3} data={{ sum: 2 }}>
- Calcular
- </button>
- <Inner data-framework-name="Nullstack" />
- </div>
- )
- }
-}
-
-export default ContextData
---💡 Chaves camelizadas do objeto
-dataresultarão em atributos kebab no DOM.
Próxima Etapa
⚔ Aprenda sobre a chave environment do contexto.
Contexto Data
-
-
- Tipo:
object
- - Origem: Contexto Componente -
- Disponibilidade: client -
- readonly no contexto do client -
Ele te dá informações sobre o conjunto de dados do elemento.
-Você pode usar esta chave para evitar poluir seu DOM com atributos inválidos.
---💡 Isso ajuda o Nullstack a definir atributos sem perder tempo validando-os.
-
Quaisquer atributos data-* receberão uma chave camelizada respectiva no objeto data.
Você pode atribuir atributos data ambos via data-* e uma chave data que aceita um objeto com chaves camelizadas.
A versão kebab também está disponível no contexto.
-import Nullstack from "nullstack"
-
-class ContextData extends Nullstack {
- count = 1
-
- calculate({ data }) {
- this.count = this.count * data.multiply + data.sum
- }
-
- renderInner(context) {
- const { data } = context
- return (
- <div data={data}>
- {data.frameworkName}é o mesmo que
- {context["data-framework-name"]}
- </div>
- )
- }
-
- render({ data }) {
- return (
- <div>
- <button onclick={this.calculate} data-multiply={3} data={{ sum: 2 }}>
- Calcular
- </button>
- <Inner data-framework-name="Nullstack" />
- </div>
- )
- }
-}
-
-export default ContextData
---💡 Chaves camelizadas do objeto
-dataresultarão em atributos kebab no DOM.
Próxima Etapa
⚔ Aprenda sobre a chave environment do contexto.
- \n
- Tipo:
object\n - Origem: Contexto Componente \n
- Disponibilidade: client \n
- readonly no contexto do client \n
Ele te dá informações sobre o conjunto de dados do elemento.
\nVocê pode usar esta chave para evitar poluir seu DOM com atributos inválidos.
\n\n\n💡 Isso ajuda o Nullstack a definir atributos sem perder tempo validando-os.
\n
Quaisquer atributos data-* receberão uma chave camelizada respectiva no objeto data.
Você pode atribuir atributos data ambos via data-* e uma chave data que aceita um objeto com chaves camelizadas.
A versão kebab também está disponível no contexto.
\nimport Nullstack from \"nullstack\"\n\nclass ContextData extends Nullstack {\n count = 1\n\n calculate({ data }) {\n this.count = this.count * data.multiply + data.sum\n }\n\n renderInner(context) {\n const { data } = context\n return (\n <div data={data}>\n {data.frameworkName}é o mesmo que\n {context[\"data-framework-name\"]}\n </div>\n )\n }\n\n render({ data }) {\n return (\n <div>\n <button onclick={this.calculate} data-multiply={3} data={{ sum: 2 }}>\n Calcular\n </button>\n <Inner data-framework-name=\"Nullstack\" />\n </div>\n )\n }\n}\n\nexport default ContextData\n\n\n💡 Chaves camelizadas do objeto
\ndataresultarão em atributos kebab no DOM.
Próxima Etapa
⚔ Aprenda sobre a chave environment do contexto.
Contexto Environment
-
-
- Tipo:
object
- - Origem: Contexto Nullstack -
- Disponibilidade: server/client -
- readonly em ambos server e client -
Ele te dá informações sobre o ambiente atual.
-As seguintes chaves estão disponíveis no objeto:
--
-
- client:
boolean
- - server:
boolean
- - development:
boolean
- - production:
boolean
- - static:
boolean
- - key:
string
-
import Nullstack from 'nullstack';
-
-class Page extends Nullstack {
-
- render({environment}) {
- return (
- <div>
- {environment.client && <p>Estou no cliente</p>}
- {environment.server && <p>Estou no servidor</p>}
- {environment.development && <p>Estou em modo de desenvolvimento</p>}
- {environment.production && <p>Estou em modo de produção</p>}
- {environment.static && <p>Estou em um site estático</p>}
- <p>Minha chave é {environment.key}</p>
- </div>
- )
- }
-
-}
-
-export default Page;
-A chave key do environment é um hash md5 das saídas da pasta do ambiente atual. A key é anexada nos caminhos dos assets e na API estática para auxiliar no controle de cache.
Próxima Etapa
⚔ Aprenda sobre a chave page do contexto.
Contexto Environment
-
-
- Tipo:
object
- - Origem: Contexto Nullstack -
- Disponibilidade: server/client -
- readonly em ambos server e client -
Ele te dá informações sobre o ambiente atual.
-As seguintes chaves estão disponíveis no objeto:
--
-
- client:
boolean
- - server:
boolean
- - development:
boolean
- - production:
boolean
- - static:
boolean
- - key:
string
-
import Nullstack from 'nullstack';
-
-class Page extends Nullstack {
-
- render({environment}) {
- return (
- <div>
- {environment.client && <p>Estou no cliente</p>}
- {environment.server && <p>Estou no servidor</p>}
- {environment.development && <p>Estou em modo de desenvolvimento</p>}
- {environment.production && <p>Estou em modo de produção</p>}
- {environment.static && <p>Estou em um site estático</p>}
- <p>Minha chave é {environment.key}</p>
- </div>
- )
- }
-
-}
-
-export default Page;
-A chave key do environment é um hash md5 das saídas da pasta do ambiente atual. A key é anexada nos caminhos dos assets e na API estática para auxiliar no controle de cache.
Próxima Etapa
⚔ Aprenda sobre a chave page do contexto.
- \n
- Tipo:
object\n - Origem: Contexto Nullstack \n
- Disponibilidade: server/client \n
- readonly em ambos server e client \n
Ele te dá informações sobre o ambiente atual.
\nAs seguintes chaves estão disponíveis no objeto:
\n- \n
- client:
boolean\n - server:
boolean\n - development:
boolean\n - production:
boolean\n - static:
boolean\n - key:
string\n
import Nullstack from 'nullstack';\n\nclass Page extends Nullstack {\n \n render({environment}) {\n return (\n <div> \n {environment.client && <p>Estou no cliente</p>}\n {environment.server && <p>Estou no servidor</p>}\n {environment.development && <p>Estou em modo de desenvolvimento</p>}\n {environment.production && <p>Estou em modo de produção</p>}\n {environment.static && <p>Estou em um site estático</p>}\n <p>Minha chave é {environment.key}</p>\n </div>\n )\n }\n\n}\n\nexport default Page;\nA chave key do environment é um hash md5 das saídas da pasta do ambiente atual. A key é anexada nos caminhos dos assets e na API estática para auxiliar no controle de cache.
Próxima Etapa
⚔ Aprenda sobre a chave page do contexto.
Contexto Page
-
-
- Tipo:
object
- - Origem: Contexto Nullstack -
- Disponibilidade: server/client -
- readwrite em ambos server e client -
Ele fornece informações sobre as metatags da head do documento.
Chaves de page serão usadas para gerar as metatags durante a renderização no lado do servidor e devem ser atribuídas antes do ciclo initiate ser resolvido.
As seguintes chaves estão disponíveis no objeto:
--
-
- title:
string
- - image:
string(URL absoluto ou relativo)
- - description:
string
- - canonical:
string(URL absoluto ou relativo)
- - locale:
string
- - robots:
string
- - schema:
object
- - changes:
string
- - priority:
number
- - status:
number
-
Quando a chave title é atribuída no lado do client, o título do documento será atualizado.
Nullstack utiliza as chaves changes e priority para gerar o sitemap.xml.
O mapa do site é gerado automaticamente apenas ao utilizar a geração de site estático e deve ser gerado manualmente em aplicativos com a renderização no lado do servidor.
-A chave changes representa a chave changefreq no sitemap.xml e se for atribuída deverá ser um dos seguintes valores:
-
-
- always -
- hourly -
- daily -
- weekly -
- monthly -
- yearly -
- never -
A chave priority é um número entre 0.0 e 1.0 que representa a chave priority no sitemap.xml.
Nullstack não define uma prioridade padrão, no entanto, sitemaps assumem uma prioridade 0.5 quando não são definidas explicitamente.
Além de title e locale, todas as outras chaves tem padrões sensíveis e gerados com base no escopo do aplicativo.
import Nullstack from 'nullstack';
-
-class Page extends Nullstack {
-
- prepare({project, page}) {
- page.title = `${project.name} - Título da página`;
- page.image = '/imagem.jpg';
- page.description = 'Meta descrição da página';
- page.canonical = 'http://absoluto.url/canonical-link';
- page.locale = 'pt-BR';
- page.robots = 'index, follow';
- page.schema = {};
- page.changes = 'weekly';
- page.priority = 1;
- }
-
- render({page}) {
- return (
- <div>
- <h1>{page.title}</h1>
- <p>{page.description}</p>
- </div>
- )
- }
-
-}
-
-export default Page;
-Eventos Personalizados
Atualizando page.title gerará um evento personalizado.
import Nullstack from 'nullstack';
-
-class Analytics extends Nullstack {
-
- hydrate({page}) {
- window.addEventListener(page.event, () => {
- console.log(page.title);
- });
- }
-
-}
-
-export default Analytics;
-Páginas de erro
Se durante o processo de renderização no lado do servidor o page.status estiver com qualquer valor além de 200, seu aplicativo receberá outra passagem na renderização e lhe possibilitará ajustar a interface de acordo com o status retornado.
A chave status será gerada na resposta HTTP.
O status da página será modificado para 500 e receberá outra passagem na renderização se a página gerar uma exceção enquanto renderiza.
O status das respostas de funções do servidor será definido no page.status.
import Nullstack from 'nullstack';
-import ErrorPage from './ErrorPage';
-import HomePage from './HomePage';
-
-class Application extends Nullstack {
-
- // ...
-
- render({page}) {
- return (
- <main>
- {page.status !== 200 && <ErrorPage route="*" />}
- <HomePage route="/" />
- </main>
- )
- }
-
-}
-
-export default Application;
---🔥 A atribuição à chave
-statusdurante o modo aplicativo de página única não terá efeito.
Próximo Passo
⚔ Aprenda sobre a chave project do contexto.
Contexto Page
-
-
- Tipo:
object
- - Origem: Contexto Nullstack -
- Disponibilidade: server/client -
- readwrite em ambos server e client -
Ele fornece informações sobre as metatags da head do documento.
Chaves de page serão usadas para gerar as metatags durante a renderização no lado do servidor e devem ser atribuídas antes do ciclo initiate ser resolvido.
As seguintes chaves estão disponíveis no objeto:
--
-
- title:
string
- - image:
string(URL absoluto ou relativo)
- - description:
string
- - canonical:
string(URL absoluto ou relativo)
- - locale:
string
- - robots:
string
- - schema:
object
- - changes:
string
- - priority:
number
- - status:
number
-
Quando a chave title é atribuída no lado do client, o título do documento será atualizado.
Nullstack utiliza as chaves changes e priority para gerar o sitemap.xml.
O mapa do site é gerado automaticamente apenas ao utilizar a geração de site estático e deve ser gerado manualmente em aplicativos com a renderização no lado do servidor.
-A chave changes representa a chave changefreq no sitemap.xml e se for atribuída deverá ser um dos seguintes valores:
-
-
- always -
- hourly -
- daily -
- weekly -
- monthly -
- yearly -
- never -
A chave priority é um número entre 0.0 e 1.0 que representa a chave priority no sitemap.xml.
Nullstack não define uma prioridade padrão, no entanto, sitemaps assumem uma prioridade 0.5 quando não são definidas explicitamente.
Além de title e locale, todas as outras chaves tem padrões sensíveis e gerados com base no escopo do aplicativo.
import Nullstack from 'nullstack';
-
-class Page extends Nullstack {
-
- prepare({project, page}) {
- page.title = `${project.name} - Título da página`;
- page.image = '/imagem.jpg';
- page.description = 'Meta descrição da página';
- page.canonical = 'http://absoluto.url/canonical-link';
- page.locale = 'pt-BR';
- page.robots = 'index, follow';
- page.schema = {};
- page.changes = 'weekly';
- page.priority = 1;
- }
-
- render({page}) {
- return (
- <div>
- <h1>{page.title}</h1>
- <p>{page.description}</p>
- </div>
- )
- }
-
-}
-
-export default Page;
-Eventos Personalizados
Atualizando page.title gerará um evento personalizado.
import Nullstack from 'nullstack';
-
-class Analytics extends Nullstack {
-
- hydrate({page}) {
- window.addEventListener(page.event, () => {
- console.log(page.title);
- });
- }
-
-}
-
-export default Analytics;
-Páginas de erro
Se durante o processo de renderização no lado do servidor o page.status estiver com qualquer valor além de 200, seu aplicativo receberá outra passagem na renderização e lhe possibilitará ajustar a interface de acordo com o status retornado.
A chave status será gerada na resposta HTTP.
O status da página será modificado para 500 e receberá outra passagem na renderização se a página gerar uma exceção enquanto renderiza.
O status das respostas de funções do servidor será definido no page.status.
import Nullstack from 'nullstack';
-import ErrorPage from './ErrorPage';
-import HomePage from './HomePage';
-
-class Application extends Nullstack {
-
- // ...
-
- render({page}) {
- return (
- <main>
- {page.status !== 200 && <ErrorPage route="*" />}
- <HomePage route="/" />
- </main>
- )
- }
-
-}
-
-export default Application;
---🔥 A atribuição à chave
-statusdurante o modo aplicativo de página única não terá efeito.
Próximo Passo
⚔ Aprenda sobre a chave project do contexto.
- \n
- Tipo:
object\n - Origem: Contexto Nullstack \n
- Disponibilidade: server/client \n
- readwrite em ambos server e client \n
Ele fornece informações sobre as metatags da head do documento.
Chaves de page serão usadas para gerar as metatags durante a renderização no lado do servidor e devem ser atribuídas antes do ciclo initiate ser resolvido.
As seguintes chaves estão disponíveis no objeto:
\n- \n
- title:
string\n - image:
string(URL absoluto ou relativo) \n - description:
string\n - canonical:
string(URL absoluto ou relativo) \n - locale:
string\n - robots:
string\n - schema:
object\n - changes:
string\n - priority:
number\n - status:
number\n
Quando a chave title é atribuída no lado do client, o título do documento será atualizado.
Nullstack utiliza as chaves changes e priority para gerar o sitemap.xml.
O mapa do site é gerado automaticamente apenas ao utilizar a geração de site estático e deve ser gerado manualmente em aplicativos com a renderização no lado do servidor.
\nA chave changes representa a chave changefreq no sitemap.xml e se for atribuída deverá ser um dos seguintes valores:
- \n
- always \n
- hourly \n
- daily \n
- weekly \n
- monthly \n
- yearly \n
- never \n
A chave priority é um número entre 0.0 e 1.0 que representa a chave priority no sitemap.xml.
Nullstack não define uma prioridade padrão, no entanto, sitemaps assumem uma prioridade 0.5 quando não são definidas explicitamente.
Além de title e locale, todas as outras chaves tem padrões sensíveis e gerados com base no escopo do aplicativo.
import Nullstack from 'nullstack';\n\nclass Page extends Nullstack {\n\n prepare({project, page}) {\n page.title = `${project.name} - Título da página`;\n page.image = '/imagem.jpg';\n page.description = 'Meta descrição da página';\n page.canonical = 'http://absoluto.url/canonical-link';\n page.locale = 'pt-BR';\n page.robots = 'index, follow';\n page.schema = {};\n page.changes = 'weekly';\n page.priority = 1;\n }\n\n render({page}) {\n return (\n <div>\n <h1>{page.title}</h1>\n <p>{page.description}</p>\n </div>\n )\n }\n\n}\n\nexport default Page;\nEventos Personalizados
Atualizando page.title gerará um evento personalizado.
import Nullstack from 'nullstack';\n\nclass Analytics extends Nullstack {\n\n hydrate({page}) {\n window.addEventListener(page.event, () => {\n console.log(page.title);\n });\n }\n\n}\n\nexport default Analytics;\nPáginas de erro
Se durante o processo de renderização no lado do servidor o page.status estiver com qualquer valor além de 200, seu aplicativo receberá outra passagem na renderização e lhe possibilitará ajustar a interface de acordo com o status retornado.
A chave status será gerada na resposta HTTP.
O status da página será modificado para 500 e receberá outra passagem na renderização se a página gerar uma exceção enquanto renderiza.
O status das respostas de funções do servidor será definido no page.status.
import Nullstack from 'nullstack';\nimport ErrorPage from './ErrorPage';\nimport HomePage from './HomePage';\n\nclass Application extends Nullstack {\n\n // ...\n\n render({page}) {\n return (\n <main>\n {page.status !== 200 && <ErrorPage route=\"*\" />}\n <HomePage route=\"/\" />\n </main>\n )\n }\n\n}\n\nexport default Application;\n\n\n🔥 A atribuição à chave
\nstatusdurante o modo aplicativo de página única não terá efeito.
Próximo Passo
⚔ Aprenda sobre a chave project do contexto.
Contexto Project
-
-
- Tipo:
object
- - Origem: Contexto Nullstack -
- Disponibilidade: server/client -
- readwrite no contexto do server -
- readonly no contexto do client -
Ele te dá informações sobre o manifest do app e algumas metatags.
-As chaves de project serão usadas para gerar metatags durante a renderização do lado do servidor e devem ser definidas antes que initiate seja resolvido.
As chaves de project serão usadas para gerar o manifest do app e devem ser definidas durante a inicialização da aplicação.
A chave disallow será usada para gerar o robots.txt e deverá ser definida durante a inicialização da aplicação.
As chaves de project serão congeladas após a inicialização da aplicação.
As chaves a seguir estão disponíveis no objeto:
--
-
- domain:
string
- - name:
string
- - shortName:
string
- - color:
string
- - backgroundColor:
string
- - type:
string
- - display:
string
- - orientation:
string
- - scope:
string
- - root:
string
- - icons:
object
- - favicon:
string(url relativo ou absoluto)
- - disallow:
arraydestring(caminhos relativos)
- - sitemap:
booleanoustring(url relativo ou absoluto)
- - cdn:
string(url absoluto)
- - protocol:
string(http or https)
-
Além de domain, name and color todas as outras chaves tem padrões sensíveis gerados com base no escopo do aplicativo.
Se você não declarar a chave icons, Nullstack irá escanear quaisquer ícones com o nome seguindo o padrão "icon-[LARGURA]x[ALTURA].png" na sua pasta public.
Se a chave sitemap estiver definida como true o seu arquivo robots.txt irá apontar o sitemap para https://${project.domain}/sitemap.xml.
A chave cdn irá prefixar seu pacote de assets e ficará disponível no contexto para que você possa manualmente prefixar outros ativos.
A chave protocol é "http" no modo de desenvolvimento e "https" e no modo produção por predefinição.
import Nullstack from 'nullstack';
-
-class Application extends Nullstack {
-
- static async start({project}) {
- project.name = 'Nullstack';
- project.shortName = 'Nullstack';
- project.domain = 'nullstack.app';
- project.color = '#d22365';
- project.backgroundColor = '#d22365';
- project.type = 'website';
- project.display = 'standalone';
- project.orientation = 'portrait';
- project.scope = '/';
- project.root = '/';
- project.icons = {
- '72': '/icon-72x72.png',
- '128': '/icon-128x128.png',
- '512': '/icon-512x512.png'
- };
- project.favicon = '/favicon.png';
- project.disallow = ['/admin'];
- project.sitemap = true;
- project.cdn = 'cdn.nullstack.app';
- project.protocol = 'https';
- }
-
- prepare({project, page}) {
- page.title = project.name;
- }
-
-}
-
-export default Application;
---💡 Você pode substituir o manifest.json gerado automaticamente e robots.txt inserindo o seu próprio arquivo na pasta public
-
Próximo Passo
⚔ Aprenda sobre a chave settings do contexto.
Contexto Project
-
-
- Tipo:
object
- - Origem: Contexto Nullstack -
- Disponibilidade: server/client -
- readwrite no contexto do server -
- readonly no contexto do client -
Ele te dá informações sobre o manifest do app e algumas metatags.
-As chaves de project serão usadas para gerar metatags durante a renderização do lado do servidor e devem ser definidas antes que initiate seja resolvido.
As chaves de project serão usadas para gerar o manifest do app e devem ser definidas durante a inicialização da aplicação.
A chave disallow será usada para gerar o robots.txt e deverá ser definida durante a inicialização da aplicação.
As chaves de project serão congeladas após a inicialização da aplicação.
As chaves a seguir estão disponíveis no objeto:
--
-
- domain:
string
- - name:
string
- - shortName:
string
- - color:
string
- - backgroundColor:
string
- - type:
string
- - display:
string
- - orientation:
string
- - scope:
string
- - root:
string
- - icons:
object
- - favicon:
string(url relativo ou absoluto)
- - disallow:
arraydestring(caminhos relativos)
- - sitemap:
booleanoustring(url relativo ou absoluto)
- - cdn:
string(url absoluto)
- - protocol:
string(http or https)
-
Além de domain, name and color todas as outras chaves tem padrões sensíveis gerados com base no escopo do aplicativo.
Se você não declarar a chave icons, Nullstack irá escanear quaisquer ícones com o nome seguindo o padrão "icon-[LARGURA]x[ALTURA].png" na sua pasta public.
Se a chave sitemap estiver definida como true o seu arquivo robots.txt irá apontar o sitemap para https://${project.domain}/sitemap.xml.
A chave cdn irá prefixar seu pacote de assets e ficará disponível no contexto para que você possa manualmente prefixar outros ativos.
A chave protocol é "http" no modo de desenvolvimento e "https" e no modo produção por predefinição.
import Nullstack from 'nullstack';
-
-class Application extends Nullstack {
-
- static async start({project}) {
- project.name = 'Nullstack';
- project.shortName = 'Nullstack';
- project.domain = 'nullstack.app';
- project.color = '#d22365';
- project.backgroundColor = '#d22365';
- project.type = 'website';
- project.display = 'standalone';
- project.orientation = 'portrait';
- project.scope = '/';
- project.root = '/';
- project.icons = {
- '72': '/icon-72x72.png',
- '128': '/icon-128x128.png',
- '512': '/icon-512x512.png'
- };
- project.favicon = '/favicon.png';
- project.disallow = ['/admin'];
- project.sitemap = true;
- project.cdn = 'cdn.nullstack.app';
- project.protocol = 'https';
- }
-
- prepare({project, page}) {
- page.title = project.name;
- }
-
-}
-
-export default Application;
---💡 Você pode substituir o manifest.json gerado automaticamente e robots.txt inserindo o seu próprio arquivo na pasta public
-
Próximo Passo
⚔ Aprenda sobre a chave settings do contexto.
- \n
- Tipo:
object\n - Origem: Contexto Nullstack \n
- Disponibilidade: server/client \n
- readwrite no contexto do server \n
- readonly no contexto do client \n
Ele te dá informações sobre o manifest do app e algumas metatags.
\nAs chaves de project serão usadas para gerar metatags durante a renderização do lado do servidor e devem ser definidas antes que initiate seja resolvido.
As chaves de project serão usadas para gerar o manifest do app e devem ser definidas durante a inicialização da aplicação.
A chave disallow será usada para gerar o robots.txt e deverá ser definida durante a inicialização da aplicação.
As chaves de project serão congeladas após a inicialização da aplicação.
As chaves a seguir estão disponíveis no objeto:
\n- \n
- domain:
string\n - name:
string\n - shortName:
string\n - color:
string\n - backgroundColor:
string\n - type:
string\n - display:
string\n - orientation:
string\n - scope:
string\n - root:
string\n - icons:
object\n - favicon:
string(url relativo ou absoluto) \n - disallow:
arraydestring(caminhos relativos) \n - sitemap:
booleanoustring(url relativo ou absoluto) \n - cdn:
string(url absoluto) \n - protocol:
string(http or https) \n
Além de domain, name and color todas as outras chaves tem padrões sensíveis gerados com base no escopo do aplicativo.
Se você não declarar a chave icons, Nullstack irá escanear quaisquer ícones com o nome seguindo o padrão "icon-[LARGURA]x[ALTURA].png" na sua pasta public.
Se a chave sitemap estiver definida como true o seu arquivo robots.txt irá apontar o sitemap para https://${project.domain}/sitemap.xml.
A chave cdn irá prefixar seu pacote de assets e ficará disponível no contexto para que você possa manualmente prefixar outros ativos.
A chave protocol é "http" no modo de desenvolvimento e "https" e no modo produção por predefinição.
import Nullstack from 'nullstack';\n\nclass Application extends Nullstack {\n\n static async start({project}) {\n project.name = 'Nullstack';\n project.shortName = 'Nullstack';\n project.domain = 'nullstack.app';\n project.color = '#d22365';\n project.backgroundColor = '#d22365';\n project.type = 'website';\n project.display = 'standalone';\n project.orientation = 'portrait';\n project.scope = '/';\n project.root = '/';\n project.icons = {\n '72': '/icon-72x72.png',\n '128': '/icon-128x128.png',\n '512': '/icon-512x512.png'\n };\n project.favicon = '/favicon.png';\n project.disallow = ['/admin'];\n project.sitemap = true;\n project.cdn = 'cdn.nullstack.app';\n project.protocol = 'https';\n }\n\n prepare({project, page}) {\n page.title = project.name;\n }\n\n}\n\nexport default Application;\n\n\n💡 Você pode substituir o manifest.json gerado automaticamente e robots.txt inserindo o seu próprio arquivo na pasta public
\n
Próximo Passo
⚔ Aprenda sobre a chave settings do contexto.
Contexto Secrets
-
-
- Tipo:
object
- - Origem: Contexto Nullstack -
- Disponibilidade: server -
- readwrite no contexto do server -
Você pode usá-lo para configurar dados sensíveis para sua aplicação.
-Chaves de secrets são congeladas depois da inicialização da aplicação.
As seguintes chaves estão disponíveis no objeto:
--
-
- development:
object
- - production:
object
- - [qualquerSegredo]:
any
-
Você pode definir chaves diferentes para as chaves development e production, obtendo assim valores diferentes para cada ambiente.
Caso uma chave seja definida diretamente no objeto secrets ela ficará disponível para ambos os ambientes.
A leitura das chaves deve ser feita diretamente do objeto secrets, pois o Nullstack vai retornar o valor referido de acordo com o ambiente.
import Nullstack from 'nullstack';
-
-class Application extends Nullstack {
-
- static async start({secrets}) {
- secrets.development.privateKey = 'SANDBOX_API_KEY';
- secrets.production.privateKey = 'PRODUCTION_API_KEY';
- secrets.endpoint = 'https://domain.com/api';
- }
-
- static async fetchFromApi({secrets}) {
- const response = await fetch(secrets.endpoint, {
- headers: {
- Authorization: `Bearer ${secrets.privateKey}`
- }
- });
- return await response.json();
- }
-
-}
-
-export default Application;
-Qualquer chave de ambiente iniciada por NULLSTACK_SECRETS_ será mapeada para o secrets de seu respectivo ambiente.
---🐱💻 NULLSTACK_SECRETS_PRIVATE_KEY será mapeada para
-secrets.privateKey
Próximo passo
⚔ Aprendendo sobre o self da instância.
Contexto Secrets
-
-
- Tipo:
object
- - Origem: Contexto Nullstack -
- Disponibilidade: server -
- readwrite no contexto do server -
Você pode usá-lo para configurar dados sensíveis para sua aplicação.
-Chaves de secrets são congeladas depois da inicialização da aplicação.
As seguintes chaves estão disponíveis no objeto:
--
-
- development:
object
- - production:
object
- - [qualquerSegredo]:
any
-
Você pode definir chaves diferentes para as chaves development e production, obtendo assim valores diferentes para cada ambiente.
Caso uma chave seja definida diretamente no objeto secrets ela ficará disponível para ambos os ambientes.
A leitura das chaves deve ser feita diretamente do objeto secrets, pois o Nullstack vai retornar o valor referido de acordo com o ambiente.
import Nullstack from 'nullstack';
-
-class Application extends Nullstack {
-
- static async start({secrets}) {
- secrets.development.privateKey = 'SANDBOX_API_KEY';
- secrets.production.privateKey = 'PRODUCTION_API_KEY';
- secrets.endpoint = 'https://domain.com/api';
- }
-
- static async fetchFromApi({secrets}) {
- const response = await fetch(secrets.endpoint, {
- headers: {
- Authorization: `Bearer ${secrets.privateKey}`
- }
- });
- return await response.json();
- }
-
-}
-
-export default Application;
-Qualquer chave de ambiente iniciada por NULLSTACK_SECRETS_ será mapeada para o secrets de seu respectivo ambiente.
---🐱💻 NULLSTACK_SECRETS_PRIVATE_KEY será mapeada para
-secrets.privateKey
Próximo passo
⚔ Aprendendo sobre o self da instância.
- \n
- Tipo:
object\n - Origem: Contexto Nullstack \n
- Disponibilidade: server \n
- readwrite no contexto do server \n
Você pode usá-lo para configurar dados sensíveis para sua aplicação.
\nChaves de secrets são congeladas depois da inicialização da aplicação.
As seguintes chaves estão disponíveis no objeto:
\n- \n
- development:
object\n - production:
object\n - [qualquerSegredo]:
any\n
Você pode definir chaves diferentes para as chaves development e production, obtendo assim valores diferentes para cada ambiente.
Caso uma chave seja definida diretamente no objeto secrets ela ficará disponível para ambos os ambientes.
A leitura das chaves deve ser feita diretamente do objeto secrets, pois o Nullstack vai retornar o valor referido de acordo com o ambiente.
import Nullstack from 'nullstack';\n\nclass Application extends Nullstack {\n\n static async start({secrets}) {\n secrets.development.privateKey = 'SANDBOX_API_KEY';\n secrets.production.privateKey = 'PRODUCTION_API_KEY';\n secrets.endpoint = 'https://domain.com/api';\n }\n\n static async fetchFromApi({secrets}) {\n const response = await fetch(secrets.endpoint, {\n headers: {\n Authorization: `Bearer ${secrets.privateKey}`\n }\n });\n return await response.json();\n }\n\n}\n\nexport default Application;\nQualquer chave de ambiente iniciada por NULLSTACK_SECRETS_ será mapeada para o secrets de seu respectivo ambiente.
\n\n\n🐱💻 NULLSTACK_SECRETS_PRIVATE_KEY será mapeada para
\nsecrets.privateKey
Próximo passo
⚔ Aprendendo sobre o self da instância.
Contexto Settings
-
-
- Tipo:
object
- - Origem: Contexto Nullstack -
- Disponibilidade: server/client -
- readwrite no contexto do server -
- readonly no contexto do client -
Você pode usá-lo para configurar seu aplicativo com informações públicas.
-Chaves de settings serão congeladas após a inicialização do aplicativo.
As chaves a seguir estão disponíveis no objeto:
--
-
- development:
object
- - production:
object
- - [anySetting]:
any
-
Você pode declarar as chaves para as chaves development ou production para ter diferentes configurações por ambiente.
Se você declarar uma chave diretamente para o objeto settings ela ficará disponível em ambos os ambientes.
Quando lendo de uma chave você deve ler diretamente do objeto settings e o Nullstack retornará o valor mais adequado para aquele ambiente.
import Nullstack from 'nullstack';
-
-class Application extends Nullstack {
-
- static async start({settings}) {
- settings.development.publicKey = 'SANDBOX_API_KEY';
- settings.production.publicKey = 'PRODUCTION_API_KEY';
- settings.endpoint = 'https://domain.com/api';
- }
-
- async hydrate({settings}) {
- const response = await fetch(settings.endpoint, {
- headers: {
- Authorization: `Bearer ${settings.publicKey}`
- }
- });
- this.data = await response.json();
- }
-
-}
-
-export default Application;
-Qualquer chave de ambiente começando com NULLSTACK_SETTINGS_ será mapeado para as confirgurações daquele ambiente.
---🐱💻 NULLSTACK_SETTINGS_PUBLIC_KEY será mapeado para
-settings.publicKey
Próximo passo
⚔ Aprenda sobre a chave secrets do contexto.
Contexto Settings
-
-
- Tipo:
object
- - Origem: Contexto Nullstack -
- Disponibilidade: server/client -
- readwrite no contexto do server -
- readonly no contexto do client -
Você pode usá-lo para configurar seu aplicativo com informações públicas.
-Chaves de settings serão congeladas após a inicialização do aplicativo.
As chaves a seguir estão disponíveis no objeto:
--
-
- development:
object
- - production:
object
- - [anySetting]:
any
-
Você pode declarar as chaves para as chaves development ou production para ter diferentes configurações por ambiente.
Se você declarar uma chave diretamente para o objeto settings ela ficará disponível em ambos os ambientes.
Quando lendo de uma chave você deve ler diretamente do objeto settings e o Nullstack retornará o valor mais adequado para aquele ambiente.
import Nullstack from 'nullstack';
-
-class Application extends Nullstack {
-
- static async start({settings}) {
- settings.development.publicKey = 'SANDBOX_API_KEY';
- settings.production.publicKey = 'PRODUCTION_API_KEY';
- settings.endpoint = 'https://domain.com/api';
- }
-
- async hydrate({settings}) {
- const response = await fetch(settings.endpoint, {
- headers: {
- Authorization: `Bearer ${settings.publicKey}`
- }
- });
- this.data = await response.json();
- }
-
-}
-
-export default Application;
-Qualquer chave de ambiente começando com NULLSTACK_SETTINGS_ será mapeado para as confirgurações daquele ambiente.
---🐱💻 NULLSTACK_SETTINGS_PUBLIC_KEY será mapeado para
-settings.publicKey
Próximo passo
⚔ Aprenda sobre a chave secrets do contexto.
- \n
- Tipo:
object\n - Origem: Contexto Nullstack \n
- Disponibilidade: server/client \n
- readwrite no contexto do server \n
- readonly no contexto do client \n
Você pode usá-lo para configurar seu aplicativo com informações públicas.
\nChaves de settings serão congeladas após a inicialização do aplicativo.
As chaves a seguir estão disponíveis no objeto:
\n- \n
- development:
object\n - production:
object\n - [anySetting]:
any\n
Você pode declarar as chaves para as chaves development ou production para ter diferentes configurações por ambiente.
Se você declarar uma chave diretamente para o objeto settings ela ficará disponível em ambos os ambientes.
Quando lendo de uma chave você deve ler diretamente do objeto settings e o Nullstack retornará o valor mais adequado para aquele ambiente.
import Nullstack from 'nullstack';\n\nclass Application extends Nullstack {\n\n static async start({settings}) {\n settings.development.publicKey = 'SANDBOX_API_KEY';\n settings.production.publicKey = 'PRODUCTION_API_KEY';\n settings.endpoint = 'https://domain.com/api';\n }\n\n async hydrate({settings}) {\n const response = await fetch(settings.endpoint, {\n headers: {\n Authorization: `Bearer ${settings.publicKey}`\n }\n });\n this.data = await response.json();\n }\n\n}\n\nexport default Application;\nQualquer chave de ambiente começando com NULLSTACK_SETTINGS_ será mapeado para as confirgurações daquele ambiente.
\n\n\n🐱💻 NULLSTACK_SETTINGS_PUBLIC_KEY será mapeado para
\nsettings.publicKey
Próximo passo
⚔ Aprenda sobre a chave secrets do contexto.
Contexto
Cada função no Nullstack recebe um contexto como argumento.
-Existem dois contextos, um para o cliente e outro para o servidor.
-O contexto do cliente dura enquanto a guia do navegador estiver aberta.
-O contexto do servidor dura enquanto o servidor estiver em execução.
-Ambos os contextos são proxies que mesclam as chaves de 3 objetos:
-1 - Contexto Nullstack
Essas são as informações que o framework disponibiliza para você por padrão.
-As chaves globais disponíveis em ambos server e client são:
-As chaves disponíveis apenas em funções do servidor são:
-As chaves de instância do cliente são:
-2 - Contexto Aplicação
Quando você define uma chave para o contexto, ela fica disponível para desestruturação em qualquer profundidade da aplicação, até mesmo para os objetos pais ou aplicações de terceiros que montam seu componente.
-Atualizar uma chave no contexto faz com que a aplicação seja renderizada novamente automaticamente.
-Você pode pensar nisso como um único conceito para substituir stores, contexts, services, e reducers ao mesmo tempo, usando o padrão de injeção de dependência com objetos javascript padrão.
-import Nullstack from 'nullstack';
-
-class Counter extends Nullstack {
-
- prepare(context) {
- context.count = 1;
- }
-
- static async updateTotalCount(context) {
- context.totalCount += context.count;
- }
-
- async double(context) {
- context.count += context.count;
- await this.updateTotalCount();
- }
-
- render({count}) {
- return (
- <button onclick={this.double}> {count} </button>
- )
- }
-
-}
-
-export default Counter;
-import Nullstack from 'nullstack';
-import Counter from './Counter';
-
-class Application extends Nullstack {
-
- static async start(context) {
- context.totalCount = 0;
- }
-
- render({count}) {
- return (
- <main>
- {(!count || count < 10) && <Counter />}
- </main>
- )
- }
-
-}
-
-export default Application;
-3 - Contexto Componente
Este contém os atributos que você declara em sua tag, incluindo os data.
Se o atributo é declarado em uma tag componente cada função desse componente terá acesso a esse atributo em seu contexto.
-Se o atributo for declarado em uma tag que possui um evento, ele será incorporado ao contexto da função de evento.
-import Nullstack from 'nullstack';
-
-class Counter extends Nullstack {
-
- add(context) {
- context.count += context.delta + context.amount;
- }
-
- render({count, delta}) {
- return (
- <button onclick={this.add} amount={1}>
- adicionar {delta} em {count}
- </button>
- )
- }
-
-}
-
-export default Counter;
-import Nullstack from 'nullstack';
-import Counter from './Counter';
-
-class Application extends Nullstack {
-
- prepare(context) {
- context.count = 0;
- }
-
- render() {
- return (
- <main>
- <Counter delta={2} />
- </main>
- )
- }
-
-}
-
-export default Application;
-Contexto de Funções
Cada função das subclasses do Nullstack é injetada com uma cópia do contexto da instância mesclada com seus argumentos.
-Os argumentos são opcionais, mas se declarados, devem ser um único objeto com chaves de sua escolha.
-import Nullstack from 'nullstack';
-
-class Counter extends Nullstack {
-
- add(context) {
- context.count += context.amount || 1;
- }
-
- prepare(context) {
- context.count = 0;
- this.add(); // soma 1
- this.add({amount: 2}); // soma 2
- }
-
- async initiate(context) {
- console.log(context.count); // 3
- }
-
-}
-
-export default Counter;
-Próximo passo
⚔ Aprenda sobre Rotas e Parâmetros.
-Contexto
Cada função no Nullstack recebe um contexto como argumento.
-Existem dois contextos, um para o cliente e outro para o servidor.
-O contexto do cliente dura enquanto a guia do navegador estiver aberta.
-O contexto do servidor dura enquanto o servidor estiver em execução.
-Ambos os contextos são proxies que mesclam as chaves de 3 objetos:
-1 - Contexto Nullstack
Essas são as informações que o framework disponibiliza para você por padrão.
-As chaves globais disponíveis em ambos server e client são:
-As chaves disponíveis apenas em funções do servidor são:
-As chaves de instância do cliente são:
-2 - Contexto Aplicação
Quando você define uma chave para o contexto, ela fica disponível para desestruturação em qualquer profundidade da aplicação, até mesmo para os objetos pais ou aplicações de terceiros que montam seu componente.
-Atualizar uma chave no contexto faz com que a aplicação seja renderizada novamente automaticamente.
-Você pode pensar nisso como um único conceito para substituir stores, contexts, services, e reducers ao mesmo tempo, usando o padrão de injeção de dependência com objetos javascript padrão.
-import Nullstack from 'nullstack';
-
-class Counter extends Nullstack {
-
- prepare(context) {
- context.count = 1;
- }
-
- static async updateTotalCount(context) {
- context.totalCount += context.count;
- }
-
- async double(context) {
- context.count += context.count;
- await this.updateTotalCount();
- }
-
- render({count}) {
- return (
- <button onclick={this.double}> {count} </button>
- )
- }
-
-}
-
-export default Counter;
-import Nullstack from 'nullstack';
-import Counter from './Counter';
-
-class Application extends Nullstack {
-
- static async start(context) {
- context.totalCount = 0;
- }
-
- render({count}) {
- return (
- <main>
- {(!count || count < 10) && <Counter />}
- </main>
- )
- }
-
-}
-
-export default Application;
-3 - Contexto Componente
Este contém os atributos que você declara em sua tag, incluindo os data.
Se o atributo é declarado em uma tag componente cada função desse componente terá acesso a esse atributo em seu contexto.
-Se o atributo for declarado em uma tag que possui um evento, ele será incorporado ao contexto da função de evento.
-import Nullstack from 'nullstack';
-
-class Counter extends Nullstack {
-
- add(context) {
- context.count += context.delta + context.amount;
- }
-
- render({count, delta}) {
- return (
- <button onclick={this.add} amount={1}>
- adicionar {delta} em {count}
- </button>
- )
- }
-
-}
-
-export default Counter;
-import Nullstack from 'nullstack';
-import Counter from './Counter';
-
-class Application extends Nullstack {
-
- prepare(context) {
- context.count = 0;
- }
-
- render() {
- return (
- <main>
- <Counter delta={2} />
- </main>
- )
- }
-
-}
-
-export default Application;
-Contexto de Funções
Cada função das subclasses do Nullstack é injetada com uma cópia do contexto da instância mesclada com seus argumentos.
-Os argumentos são opcionais, mas se declarados, devem ser um único objeto com chaves de sua escolha.
-import Nullstack from 'nullstack';
-
-class Counter extends Nullstack {
-
- add(context) {
- context.count += context.amount || 1;
- }
-
- prepare(context) {
- context.count = 0;
- this.add(); // soma 1
- this.add({amount: 2}); // soma 2
- }
-
- async initiate(context) {
- console.log(context.count); // 3
- }
-
-}
-
-export default Counter;
-Próximo passo
⚔ Aprenda sobre Rotas e Parâmetros.
-Cada função no Nullstack recebe um contexto como argumento.
\nExistem dois contextos, um para o cliente e outro para o servidor.
\nO contexto do cliente dura enquanto a guia do navegador estiver aberta.
\nO contexto do servidor dura enquanto o servidor estiver em execução.
\nAmbos os contextos são proxies que mesclam as chaves de 3 objetos:
\n1 - Contexto Nullstack
Essas são as informações que o framework disponibiliza para você por padrão.
\nAs chaves globais disponíveis em ambos server e client são:
\nAs chaves disponíveis apenas em funções do servidor são:
\nAs chaves de instância do cliente são:
\n2 - Contexto Aplicação
Quando você define uma chave para o contexto, ela fica disponível para desestruturação em qualquer profundidade da aplicação, até mesmo para os objetos pais ou aplicações de terceiros que montam seu componente.
\nAtualizar uma chave no contexto faz com que a aplicação seja renderizada novamente automaticamente.
\nVocê pode pensar nisso como um único conceito para substituir stores, contexts, services, e reducers ao mesmo tempo, usando o padrão de injeção de dependência com objetos javascript padrão.
\nimport Nullstack from 'nullstack';\n\nclass Counter extends Nullstack {\n\n prepare(context) {\n context.count = 1;\n }\n\n static async updateTotalCount(context) {\n context.totalCount += context.count;\n }\n\n async double(context) {\n context.count += context.count;\n await this.updateTotalCount();\n }\n\n render({count}) {\n return (\n <button onclick={this.double}> {count} </button>\n )\n }\n\n}\n\nexport default Counter;\nimport Nullstack from 'nullstack';\nimport Counter from './Counter';\n\nclass Application extends Nullstack {\n\n static async start(context) {\n context.totalCount = 0;\n }\n\n render({count}) {\n return (\n <main>\n {(!count || count < 10) && <Counter />}\n </main>\n )\n }\n\n}\n\nexport default Application;\n3 - Contexto Componente
Este contém os atributos que você declara em sua tag, incluindo os data.
Se o atributo é declarado em uma tag componente cada função desse componente terá acesso a esse atributo em seu contexto.
\nSe o atributo for declarado em uma tag que possui um evento, ele será incorporado ao contexto da função de evento.
\nimport Nullstack from 'nullstack';\n\nclass Counter extends Nullstack {\n\n add(context) {\n context.count += context.delta + context.amount;\n }\n\n render({count, delta}) {\n return (\n <button onclick={this.add} amount={1}>\n adicionar {delta} em {count}\n </button>\n )\n }\n\n}\n\nexport default Counter;\nimport Nullstack from 'nullstack';\nimport Counter from './Counter';\n\nclass Application extends Nullstack {\n\n prepare(context) {\n context.count = 0;\n }\n\n render() {\n return (\n <main>\n <Counter delta={2} />\n </main>\n )\n }\n\n}\n\nexport default Application;\nContexto de Funções
Cada função das subclasses do Nullstack é injetada com uma cópia do contexto da instância mesclada com seus argumentos.
\nOs argumentos são opcionais, mas se declarados, devem ser um único objeto com chaves de sua escolha.
\nimport Nullstack from 'nullstack';\n\nclass Counter extends Nullstack {\n\n add(context) {\n context.count += context.amount || 1;\n }\n\n prepare(context) {\n context.count = 0;\n this.add(); // soma 1\n this.add({amount: 2}); // soma 2\n }\n\n async initiate(context) {\n console.log(context.count); // 3\n }\n\n}\n\nexport default Counter;\nPróximo passo
⚔ Aprenda sobre Rotas e Parâmetros.
\n","description":"Cada função no Nullstack recebe um contexto como argumento."},"n-0-0-13":{},"n-0-0-15":{},"n-0-0-16":{"locale":"pt-BR","i18n":{"nullachan":{"alt":"Nulla-Chan","title":"Nulla-Chan: Waifu oficial do Nullstack"},"links":[{"title":"YouTube","href":"https://www.youtube.com/channel/UCUNPaxoppH3lu6JTrUX78Ww"},{"title":"Twitter","href":"https://twitter.com/nullstackapp"},{"title":"GitHub","href":"https://github.com/nullstack"}]}}}, "page": {"image":"/image-1200x630.png","status":200,"title":"Contexto - Nullstack","description":"Cada função no Nullstack recebe um contexto como argumento."}} \ No newline at end of file diff --git a/docs/pt-br/contribuidores.html b/docs/pt-br/contribuidores.html deleted file mode 100644 index 8765aa04..00000000 --- a/docs/pt-br/contribuidores.html +++ /dev/null @@ -1,52 +0,0 @@ - - - - - -O Estado do Nullstack
O Nullstack está sendo desenvolvido desde janeiro de 2019 com recursos sendo extraídos de projetos freelance.
Nesse ponto, a API está estável, os métodos de ciclo de vida e as chaves de contexto estarão praticamente congelados.
Ainda não estamos na v1.0, mas muito perto, a única coisa que falta é testá-lo em aplicativos feitos fora da equipe principal para descobrir se ele atende às necessidades de outros programadores.
O Mapa da Estrada
As próximas atualizações serão direcionadas a correções de quaisquer bugs encontrados e terão foco na qualidade de vida.
As atualizações listadas nas issues do Nullstack são as próximas etapas planejadas sem nenhuma ordem específica.
A Equipe Principal
O Nullstack foi desenvolvido por freelancers full-stacks neuroatípicos.
Com um histórico pesado em Rails, Ember.js, React.js e filosofia Vue.js as inspirações tiradas desses projetos podem ser óbvias.
Christian Mortaro
Autor Autista
Criador do conceito. Vai com novas propostas de API para seus patos de borracha favoritos e retorna com commits.
Fez a engenharia reversa de código de pensamento positivo para sua existência e depois o refatorou em um framework.
Dayson Marx
Designer Distraído
Pato de borracha com habilidades humanas, garante que o código não saia muito pra fora da caixa, então faz a caixa parecer legal.
Revisor de API que desenvolveu projetos de terceiros para testar a prova de conceitos de uma perspectiva focada no front-end.
Anny Figueira
Adotante Autista
Pato de borracha com um pescoço para encontrar inconsistências e problemas, esperando até que uma API seja aprovada para nos forçar a reescrever tudo.
Adotante antecipada do framework que desenvolveu aplicações reais em produção para validar como as partes se encaixam.
Bianca Augusta
Artista Autista
Ilustradora freelancer faz 10 anos. Viciada em Warcraft, aspirante a cosplayer e druida tanker no WoW.
Mamãe da Nulla-Chan e volta e meia lê scripts por pura pressão do Mortaro.
Guilherme Correia
import Membro from vuejs-br
Experimentalista, escritor de universos, sonhador e desenvolvedor quando acha e toca a fita K7 sem título certa.
Usuário de features não documentadas e criador de issues exigindo documentação que ele mesmo vai fazer.
Alisson Suassuna
Servo de Deus
Instrutor da TipsCode. Desenvolvedor Full-stack JavaScript, apaixonado por tecnologia e servo do Senhor Jesus Cristo.
Encarregado da criação de conteúdo sobre o Nullstack, aulas, dicas e tutoriais. Com objetivo de tornar o Nullstack fácil de usar.
Contribuidores dos Pacotes
* A lista pode demorar um pouco para ser atualizada devido ao cache da API do GitHub
Contribuidores da Documentação
* A lista pode demorar um pouco para ser atualizada devido ao cache da API do GitHub
Como Contribuir
É simples. Encontrou um bug ou deseja um novo recurso?
Crie uma issue ou envie uma pull request com testes.
O Estado do Nullstack
O Nullstack está sendo desenvolvido desde janeiro de 2019 com recursos sendo extraídos de projetos freelance.
Nesse ponto, a API está estável, os métodos de ciclo de vida e as chaves de contexto estarão praticamente congelados.
Ainda não estamos na v1.0, mas muito perto, a única coisa que falta é testá-lo em aplicativos feitos fora da equipe principal para descobrir se ele atende às necessidades de outros programadores.
O Mapa da Estrada
As próximas atualizações serão direcionadas a correções de quaisquer bugs encontrados e terão foco na qualidade de vida.
As atualizações listadas nas issues do Nullstack são as próximas etapas planejadas sem nenhuma ordem específica.
A Equipe Principal
O Nullstack foi desenvolvido por freelancers full-stacks neuroatípicos.
Com um histórico pesado em Rails, Ember.js, React.js e filosofia Vue.js as inspirações tiradas desses projetos podem ser óbvias.
Christian Mortaro
Autor Autista
Criador do conceito. Vai com novas propostas de API para seus patos de borracha favoritos e retorna com commits.
Fez a engenharia reversa de código de pensamento positivo para sua existência e depois o refatorou em um framework.
Dayson Marx
Designer Distraído
Pato de borracha com habilidades humanas, garante que o código não saia muito pra fora da caixa, então faz a caixa parecer legal.
Revisor de API que desenvolveu projetos de terceiros para testar a prova de conceitos de uma perspectiva focada no front-end.
Anny Figueira
Adotante Autista
Pato de borracha com um pescoço para encontrar inconsistências e problemas, esperando até que uma API seja aprovada para nos forçar a reescrever tudo.
Adotante antecipada do framework que desenvolveu aplicações reais em produção para validar como as partes se encaixam.
Bianca Augusta
Artista Autista
Ilustradora freelancer faz 10 anos. Viciada em Warcraft, aspirante a cosplayer e druida tanker no WoW.
Mamãe da Nulla-Chan e volta e meia lê scripts por pura pressão do Mortaro.
Guilherme Correia
import Membro from vuejs-br
Experimentalista, escritor de universos, sonhador e desenvolvedor quando acha e toca a fita K7 sem título certa.
Usuário de features não documentadas e criador de issues exigindo documentação que ele mesmo vai fazer.
Alisson Suassuna
Servo de Deus
Instrutor da TipsCode. Desenvolvedor Full-stack JavaScript, apaixonado por tecnologia e servo do Senhor Jesus Cristo.
Encarregado da criação de conteúdo sobre o Nullstack, aulas, dicas e tutoriais. Com objetivo de tornar o Nullstack fácil de usar.
Contribuidores dos Pacotes
* A lista pode demorar um pouco para ser atualizada devido ao cache da API do GitHub
Contribuidores da Documentação
* A lista pode demorar um pouco para ser atualizada devido ao cache da API do GitHub
Como Contribuir
É simples. Encontrou um bug ou deseja um novo recurso?
Crie uma issue ou envie uma pull request com testes.
Documentação do Nullstack
Siga esses passos e se torne um desenvolvedor full-stack javascript!
Principais conceitos
Comece sua jornada no Nullstack com estes conceitos básicos
Conceitos avançados
Estes são conceitos que você provavelmente aprenderá conforme precisar em seus projetos
Exemplos
A melhor maneira de aprender Nullstack é lendo algum código
Documentação do Nullstack
Siga esses passos e se torne um desenvolvedor full-stack javascript!
Principais conceitos
Comece sua jornada no Nullstack com estes conceitos básicos
Conceitos avançados
Estes são conceitos que você provavelmente aprenderá conforme precisar em seus projetos
Exemplos
A melhor maneira de aprender Nullstack é lendo algum código
Estilos
Usar estilos com o Nullstack é tão simples quanto importar um arquivo de estilo.
-O Nullstack vem com um loader SASS por padrão, mas você ainda pode usar o CSS Vanilla.
---✨ É uma boa prática importar um arquivo com o mesmo nome do componente.
-
import Nullstack from 'nullstack';
-import './Header.scss';
-
-class Header extends Nullstack {
- // ...
-}
-
-export default Header;
-No modo de produção, o Nullstack usa PurgeCSS, que limpa seu arquivo client.css, mas tem alguns truques.
---✨ Saiba mais sobre fazendo uma safelist do seu css
-
Próximo passo
⚔ Aprenda sobre a extensão de arquivo NJS.
-Estilos
Usar estilos com o Nullstack é tão simples quanto importar um arquivo de estilo.
-O Nullstack vem com um loader SASS por padrão, mas você ainda pode usar o CSS Vanilla.
---✨ É uma boa prática importar um arquivo com o mesmo nome do componente.
-
import Nullstack from 'nullstack';
-import './Header.scss';
-
-class Header extends Nullstack {
- // ...
-}
-
-export default Header;
-No modo de produção, o Nullstack usa PurgeCSS, que limpa seu arquivo client.css, mas tem alguns truques.
---✨ Saiba mais sobre fazendo uma safelist do seu css
-
Próximo passo
⚔ Aprenda sobre a extensão de arquivo NJS.
-Usar estilos com o Nullstack é tão simples quanto importar um arquivo de estilo.
\nO Nullstack vem com um loader SASS por padrão, mas você ainda pode usar o CSS Vanilla.
\n\n\n✨ É uma boa prática importar um arquivo com o mesmo nome do componente.
\n
import Nullstack from 'nullstack';\nimport './Header.scss';\n\nclass Header extends Nullstack {\n // ...\n}\n\nexport default Header;\nNo modo de produção, o Nullstack usa PurgeCSS, que limpa seu arquivo client.css, mas tem alguns truques.
\n\n\n✨ Saiba mais sobre fazendo uma safelist do seu css
\n
Próximo passo
⚔ Aprenda sobre a extensão de arquivo NJS.
\n","description":"Usar estilos com o Nullstack é tão simples quanto importar um arquivo de estilo."},"n-0-0-13":{},"n-0-0-15":{},"n-0-0-16":{"locale":"pt-BR","i18n":{"nullachan":{"alt":"Nulla-Chan","title":"Nulla-Chan: Waifu oficial do Nullstack"},"links":[{"title":"YouTube","href":"https://www.youtube.com/channel/UCUNPaxoppH3lu6JTrUX78Ww"},{"title":"Twitter","href":"https://twitter.com/nullstackapp"},{"title":"GitHub","href":"https://github.com/nullstack"}]}}}, "page": {"image":"/image-1200x630.png","status":200,"title":"Estilos - Nullstack","description":"Usar estilos com o Nullstack é tão simples quanto importar um arquivo de estilo."}} \ No newline at end of file diff --git a/docs/pt-br/extensao-de-arquivo-njs.html b/docs/pt-br/extensao-de-arquivo-njs.html deleted file mode 100644 index 580c014e..00000000 --- a/docs/pt-br/extensao-de-arquivo-njs.html +++ /dev/null @@ -1,153 +0,0 @@ - - - - - -Extensão de arquivos NJS
Os arquivos do Nullstack permitem ao Webpack saber quais carregadores usar no momento da transpilação.
-Os arquivos NJS devem importar o Nullstack ou uma de suas subclasses.
-Se apenas uma subclasse for importada, uma importação Nullstack será injetada no momento da transpilação.
-No momento da transpilação, as tags JSX serão substituídas por Nullstack.element.
Essa extensão também permite que o Nullstack faça otimizações em tempo de transpilação, como a injeção de origem.
---🔥 Cada arquivo deve ter apenas uma classe declarada.
-
-
-
- No bundle server, as funções assíncronas estáticas são mapeadas em um registro para segurança. -
- No bundle client, as funções assíncronas estáticas são removidas e substituídas por um método invoke. -
- No bundle client, as funções assíncronas estáticas com o nome começando com "start" (e opcionalmente seguido por uma letra maiúscula) são completamente removidas. -
- Nos bundles server e client, um hash com o md5 do código-fonte original é adicionado na classe. -
--🐱💻 Abaixo um exemplo de arquivo .njs original.
-
import List from './List';
-import {readFileSync} from 'fs';
-
-class Tasks extends List {
-
- static async getTasks({limit}) {
- const json = readFileSync('tasks.json', 'utf-8');
- return JSON.parse(json).tasks.slice(0, limit);
- }
-
- prepare(context) {
- context.tasks = [];
- }
-
- async initiate(context) {
- context.tasks = await this.getTasks({limit: 10});
- }
-
- renderTask({task}) {
- return (
- <li>
- <input bind={task.description} />
- </li>
- )
- }
-
- render() {
- return (
- <main>
- <ul>
- {tasks.map((task) => <Task task={task} />)}
- </ul>
- </main>
- )
- }
-
-}
-
-export default Tasks;
---🐱💻 Abaixo um exemplo do mesmo arquivo .njs transpilado.
-
import Nullstack from 'nullstack';
-import List from './List';
-
-class Tasks extends List {
-
- static hash = 'd493ac09d0d57574a30f136d31da455f';
-
- static getTasks = Nullstack.invoke('getTasks', 'd493ac09d0d57574a30f136d31da455f');
-
- prepare(context) {
- context.tasks = [];
- }
-
- async initiate(context) {
- context.tasks = await this.getTasks({limit: 10});
- }
-
- renderTask({task}) {
- return (
- <li>
- <input source={task} bind="description" />
- </li>
- )
- }
-
- render() {
- const Task = this.renderTask;
- return (
- <main>
- <ul>
- {tasks.map((task) => <Task task={task} />)}
- </ul>
- </main>
- )
- }
-
-}
-
-export default Tasks;
-Próximo Passo
⚔ Aprenda sobre a renderização no servidor.
-Extensão de arquivos NJS
Os arquivos do Nullstack permitem ao Webpack saber quais carregadores usar no momento da transpilação.
-Os arquivos NJS devem importar o Nullstack ou uma de suas subclasses.
-Se apenas uma subclasse for importada, uma importação Nullstack será injetada no momento da transpilação.
-No momento da transpilação, as tags JSX serão substituídas por Nullstack.element.
Essa extensão também permite que o Nullstack faça otimizações em tempo de transpilação, como a injeção de origem.
---🔥 Cada arquivo deve ter apenas uma classe declarada.
-
-
-
- No bundle server, as funções assíncronas estáticas são mapeadas em um registro para segurança. -
- No bundle client, as funções assíncronas estáticas são removidas e substituídas por um método invoke. -
- No bundle client, as funções assíncronas estáticas com o nome começando com "start" (e opcionalmente seguido por uma letra maiúscula) são completamente removidas. -
- Nos bundles server e client, um hash com o md5 do código-fonte original é adicionado na classe. -
--🐱💻 Abaixo um exemplo de arquivo .njs original.
-
import List from './List';
-import {readFileSync} from 'fs';
-
-class Tasks extends List {
-
- static async getTasks({limit}) {
- const json = readFileSync('tasks.json', 'utf-8');
- return JSON.parse(json).tasks.slice(0, limit);
- }
-
- prepare(context) {
- context.tasks = [];
- }
-
- async initiate(context) {
- context.tasks = await this.getTasks({limit: 10});
- }
-
- renderTask({task}) {
- return (
- <li>
- <input bind={task.description} />
- </li>
- )
- }
-
- render() {
- return (
- <main>
- <ul>
- {tasks.map((task) => <Task task={task} />)}
- </ul>
- </main>
- )
- }
-
-}
-
-export default Tasks;
---🐱💻 Abaixo um exemplo do mesmo arquivo .njs transpilado.
-
import Nullstack from 'nullstack';
-import List from './List';
-
-class Tasks extends List {
-
- static hash = 'd493ac09d0d57574a30f136d31da455f';
-
- static getTasks = Nullstack.invoke('getTasks', 'd493ac09d0d57574a30f136d31da455f');
-
- prepare(context) {
- context.tasks = [];
- }
-
- async initiate(context) {
- context.tasks = await this.getTasks({limit: 10});
- }
-
- renderTask({task}) {
- return (
- <li>
- <input source={task} bind="description" />
- </li>
- )
- }
-
- render() {
- const Task = this.renderTask;
- return (
- <main>
- <ul>
- {tasks.map((task) => <Task task={task} />)}
- </ul>
- </main>
- )
- }
-
-}
-
-export default Tasks;
-Próximo Passo
⚔ Aprenda sobre a renderização no servidor.
-Os arquivos do Nullstack permitem ao Webpack saber quais carregadores usar no momento da transpilação.
\nOs arquivos NJS devem importar o Nullstack ou uma de suas subclasses.
\nSe apenas uma subclasse for importada, uma importação Nullstack será injetada no momento da transpilação.
\nNo momento da transpilação, as tags JSX serão substituídas por Nullstack.element.
Essa extensão também permite que o Nullstack faça otimizações em tempo de transpilação, como a injeção de origem.
\n\n\n🔥 Cada arquivo deve ter apenas uma classe declarada.
\n
- \n
- No bundle server, as funções assíncronas estáticas são mapeadas em um registro para segurança. \n
- No bundle client, as funções assíncronas estáticas são removidas e substituídas por um método invoke. \n
- No bundle client, as funções assíncronas estáticas com o nome começando com "start" (e opcionalmente seguido por uma letra maiúscula) são completamente removidas. \n
- Nos bundles server e client, um hash com o md5 do código-fonte original é adicionado na classe. \n
\n\n🐱💻 Abaixo um exemplo de arquivo .njs original.
\n
import List from './List';\nimport {readFileSync} from 'fs';\n\nclass Tasks extends List {\n\n static async getTasks({limit}) {\n const json = readFileSync('tasks.json', 'utf-8');\n return JSON.parse(json).tasks.slice(0, limit);\n }\n\n prepare(context) {\n context.tasks = [];\n }\n\n async initiate(context) {\n context.tasks = await this.getTasks({limit: 10});\n }\n\n renderTask({task}) {\n return (\n <li> \n <input bind={task.description} />\n </li>\n )\n }\n\n render() {\n return (\n <main>\n <ul>\n {tasks.map((task) => <Task task={task} />)}\n </ul>\n </main>\n )\n }\n\n}\n\nexport default Tasks;\n\n\n🐱💻 Abaixo um exemplo do mesmo arquivo .njs transpilado.
\n
import Nullstack from 'nullstack';\nimport List from './List';\n\nclass Tasks extends List {\n\n static hash = 'd493ac09d0d57574a30f136d31da455f';\n\n static getTasks = Nullstack.invoke('getTasks', 'd493ac09d0d57574a30f136d31da455f');\n\n prepare(context) {\n context.tasks = [];\n }\n\n async initiate(context) {\n context.tasks = await this.getTasks({limit: 10});\n }\n\n renderTask({task}) {\n return (\n <li> \n <input source={task} bind=\"description\" />\n </li>\n )\n }\n\n render() {\n const Task = this.renderTask;\n return (\n <main>\n <ul>\n {tasks.map((task) => <Task task={task} />)}\n </ul>\n </main>\n )\n }\n\n}\n\nexport default Tasks;\nPróximo Passo
⚔ Aprenda sobre a renderização no servidor.
\n","description":"Os arquivos Nullstack permitem que o Webpack saiba quais carregadores usar no momento da transpilação"},"n-0-0-13":{},"n-0-0-15":{},"n-0-0-16":{"locale":"pt-BR","i18n":{"nullachan":{"alt":"Nulla-Chan","title":"Nulla-Chan: Waifu oficial do Nullstack"},"links":[{"title":"YouTube","href":"https://www.youtube.com/channel/UCUNPaxoppH3lu6JTrUX78Ww"},{"title":"Twitter","href":"https://twitter.com/nullstackapp"},{"title":"GitHub","href":"https://github.com/nullstack"}]}}}, "page": {"image":"/image-1200x630.png","status":200,"title":"Extensão de arquivos NJS - Nullstack","description":"Os arquivos Nullstack permitem que o Webpack saiba quais carregadores usar no momento da transpilação"}} \ No newline at end of file diff --git "a/docs/pt-br/extens\303\243o-de-arquivo-njs.html" "b/docs/pt-br/extens\303\243o-de-arquivo-njs.html" deleted file mode 100644 index c29ce87e..00000000 --- "a/docs/pt-br/extens\303\243o-de-arquivo-njs.html" +++ /dev/null @@ -1,54 +0,0 @@ - - - - - -Página Não Encontrada
Talvez você queira aprender como criar uma pagina 404 com Nullstack?
-Se você está procurando por outra coisa, você deveria ler a documentação.
-Página Não Encontrada
Talvez você queira aprender como criar uma pagina 404 com Nullstack?
-Se você está procurando por outra coisa, você deveria ler a documentação.
-Talvez você queira aprender como criar uma pagina 404 com Nullstack?
\nSe você está procurando por outra coisa, você deveria ler a documentação.
\n","description":"Desculpe, essa não é a página que você está procurando","status":404},"n-0-0-13":{},"n-0-0-15":{},"n-0-0-16":{"locale":"pt-BR","i18n":{"nullachan":{"alt":"Nulla-Chan","title":"Nulla-Chan: Waifu oficial do Nullstack"},"links":[{"title":"YouTube","href":"https://www.youtube.com/channel/UCUNPaxoppH3lu6JTrUX78Ww"},{"title":"Twitter","href":"https://twitter.com/nullstackapp"},{"title":"GitHub","href":"https://github.com/nullstack"}]}}}, "page": {"image":"/image-1200x630.png","status":404,"title":"Página Não Encontrada - Nullstack","description":"Desculpe, essa não é a página que você está procurando"}} \ No newline at end of file diff --git a/docs/pt-br/funcoes-de-servidor.html b/docs/pt-br/funcoes-de-servidor.html deleted file mode 100644 index e2bee2d1..00000000 --- a/docs/pt-br/funcoes-de-servidor.html +++ /dev/null @@ -1,200 +0,0 @@ - - - - - -Server Functions
Server functions are specialized microservices that at transpile time are converted into API entry points.
-To flag a function as a server function, you must declare it as static async.
Being a static function means it has no access to the instance scope.
-However, instead of calling the static version from the class, you must invoke it as an instance function.
-Server functions can be called anytime in your code and are not limited to prerender steps.
-import Nullstack from 'nullstack';
-
-class Component extends Nullstack {
-
- static async increment(context) {
- context.count++;
- }
-
- async handleClick() {
- await this.increment();
- }
-
- // ...
-
-}
-
-export default Component;
---✨ Learn more about the server context.
-
Client behavior
When you call a server function from the client, the arguments will be serialized as JSON.
-The arguments will be posted against the automatically generated API and merged with the server context when it reaches the server.
-The return value of the server function will be serialized back to the client and can be seamlessly used as if it were a local function.
-import Nullstack from 'nullstack';
-
-class Component extends Nullstack {
-
- static async increment(context) {
- context.count++;
- return context.count;
- }
-
- async handleClick() {
- this.count = await this.increment();
- }
-
- // ...
-
-}
-
-export default Component;
-Server behavior
Server functions will be used as local functions, simply aliasing the instance call to the class and merging the arguments with the server context.
-Date Convenience
Dates are serialized as UTC in JSON and deserialized back to Date objects.
import Nullstack from 'nullstack';
-
-class Component extends Nullstack {
-
- async initiate() {
- const date = new Date();
- const verified = this.verifyDay({date});
- }
-
- static async verifyDay({date}) {
- return date.getDay() === new Date().getDay();
- }
-
- // ...
-
-}
-
-export default Component;
-Fetch Convenience
fetch is available in both server and client functions for the sake of isomorphy.
import Nullstack from 'nullstack';
-
-class Component extends Nullstack {
-
- // ...
-
- async initiate() {
- const url = 'https://api.github.com/repos/nullstack/nullstack/issues';
- const response = await fetch(url);
- this.issues = await response.json();
- }
-
- // ...
-
-}
-
-export default Component;
-Server only imports
Imported dependencies that are only used inside server functions will be excluded from the client bundle.
-This is useful for both accessing node.js exclusive modules and reducing the client bundle size by preprocessing data like markdown without having to expose the dependency to the end-user.
-import Nullstack from 'nullstack';
-import {readFileSync} from 'fs';
-import {Remarkable} from 'remarkable';
-
-class Application extends Nullstack {
-
- static async getTasks() {
- const readme = readFileSync('README.md', 'utf-8');
- return new Remarkable().render(readme);
- }
-
- // ...
-
-}
-
-export default Application;
-Security
Keep in mind that every server function is similar to an Express route in API and must be coded without depending on view logic for security.
---🔒 Server functions with the name starting with "start" (and optionally followed by an uppercase letter) do not generate an API endpoint to avoid malicious context flooding.
-
import Nullstack from 'nullstack';
-
-class Component extends Nullstack {
-
- static async getCount({request, count}) {
- if(!request.session.user) return 0;
- return count;
- }
-
- // ...
-
-}
-
-export default Component;
---💡 Server functions are not exposed to the client.
-
--✨ Learn more about the NJS file extension.
-
Reserved words
Server function names cannot collide with instance method names from the current class or its parent classes.
-The following words cannot be used in server functions:
--
-
prepare
-initiate
-hydrate
-update
-terminate
-
Server functions named start will not generate an API endpoint and can only be called by other server functions.
Caveats
Automatically generated API endpoints are not meant to be used by 3rd-party apps.
-The URL and implementation may change between versions of Nullstack.
---✨ If you want to build an API, learn more about how to create an API with Nullstack.
-
Next step
⚔ Learn about the context.
-Server Functions
Server functions are specialized microservices that at transpile time are converted into API entry points.
-To flag a function as a server function, you must declare it as static async.
Being a static function means it has no access to the instance scope.
-However, instead of calling the static version from the class, you must invoke it as an instance function.
-Server functions can be called anytime in your code and are not limited to prerender steps.
-import Nullstack from 'nullstack';
-
-class Component extends Nullstack {
-
- static async increment(context) {
- context.count++;
- }
-
- async handleClick() {
- await this.increment();
- }
-
- // ...
-
-}
-
-export default Component;
---✨ Learn more about the server context.
-
Client behavior
When you call a server function from the client, the arguments will be serialized as JSON.
-The arguments will be posted against the automatically generated API and merged with the server context when it reaches the server.
-The return value of the server function will be serialized back to the client and can be seamlessly used as if it were a local function.
-import Nullstack from 'nullstack';
-
-class Component extends Nullstack {
-
- static async increment(context) {
- context.count++;
- return context.count;
- }
-
- async handleClick() {
- this.count = await this.increment();
- }
-
- // ...
-
-}
-
-export default Component;
-Server behavior
Server functions will be used as local functions, simply aliasing the instance call to the class and merging the arguments with the server context.
-Date Convenience
Dates are serialized as UTC in JSON and deserialized back to Date objects.
import Nullstack from 'nullstack';
-
-class Component extends Nullstack {
-
- async initiate() {
- const date = new Date();
- const verified = this.verifyDay({date});
- }
-
- static async verifyDay({date}) {
- return date.getDay() === new Date().getDay();
- }
-
- // ...
-
-}
-
-export default Component;
-Fetch Convenience
fetch is available in both server and client functions for the sake of isomorphy.
import Nullstack from 'nullstack';
-
-class Component extends Nullstack {
-
- // ...
-
- async initiate() {
- const url = 'https://api.github.com/repos/nullstack/nullstack/issues';
- const response = await fetch(url);
- this.issues = await response.json();
- }
-
- // ...
-
-}
-
-export default Component;
-Server only imports
Imported dependencies that are only used inside server functions will be excluded from the client bundle.
-This is useful for both accessing node.js exclusive modules and reducing the client bundle size by preprocessing data like markdown without having to expose the dependency to the end-user.
-import Nullstack from 'nullstack';
-import {readFileSync} from 'fs';
-import {Remarkable} from 'remarkable';
-
-class Application extends Nullstack {
-
- static async getTasks() {
- const readme = readFileSync('README.md', 'utf-8');
- return new Remarkable().render(readme);
- }
-
- // ...
-
-}
-
-export default Application;
-Security
Keep in mind that every server function is similar to an Express route in API and must be coded without depending on view logic for security.
---🔒 Server functions with the name starting with "start" (and optionally followed by an uppercase letter) do not generate an API endpoint to avoid malicious context flooding.
-
import Nullstack from 'nullstack';
-
-class Component extends Nullstack {
-
- static async getCount({request, count}) {
- if(!request.session.user) return 0;
- return count;
- }
-
- // ...
-
-}
-
-export default Component;
---💡 Server functions are not exposed to the client.
-
--✨ Learn more about the NJS file extension.
-
Reserved words
Server function names cannot collide with instance method names from the current class or its parent classes.
-The following words cannot be used in server functions:
--
-
prepare
-initiate
-hydrate
-update
-terminate
-
Server functions named start will not generate an API endpoint and can only be called by other server functions.
Caveats
Automatically generated API endpoints are not meant to be used by 3rd-party apps.
-The URL and implementation may change between versions of Nullstack.
---✨ If you want to build an API, learn more about how to create an API with Nullstack.
-
Next step
⚔ Learn about the context.
-Server functions are specialized microservices that at transpile time are converted into API entry points.
\nTo flag a function as a server function, you must declare it as static async.
Being a static function means it has no access to the instance scope.
\nHowever, instead of calling the static version from the class, you must invoke it as an instance function.
\nServer functions can be called anytime in your code and are not limited to prerender steps.
\nimport Nullstack from 'nullstack';\n\nclass Component extends Nullstack {\n\n static async increment(context) {\n context.count++;\n }\n\n async handleClick() {\n await this.increment();\n }\n\n // ...\n\n}\n\nexport default Component;\n\n\n✨ Learn more about the server context.
\n
Client behavior
When you call a server function from the client, the arguments will be serialized as JSON.
\nThe arguments will be posted against the automatically generated API and merged with the server context when it reaches the server.
\nThe return value of the server function will be serialized back to the client and can be seamlessly used as if it were a local function.
\nimport Nullstack from 'nullstack';\n\nclass Component extends Nullstack {\n\n static async increment(context) {\n context.count++;\n return context.count;\n }\n\n async handleClick() {\n this.count = await this.increment();\n }\n\n // ...\n\n}\n\nexport default Component;\nServer behavior
Server functions will be used as local functions, simply aliasing the instance call to the class and merging the arguments with the server context.
\nDate Convenience
Dates are serialized as UTC in JSON and deserialized back to Date objects.
import Nullstack from 'nullstack';\n\nclass Component extends Nullstack {\n\n async initiate() {\n const date = new Date();\n const verified = this.verifyDay({date});\n }\n\n static async verifyDay({date}) {\n return date.getDay() === new Date().getDay();\n }\n\n // ...\n\n}\n\nexport default Component;\nFetch Convenience
fetch is available in both server and client functions for the sake of isomorphy.
import Nullstack from 'nullstack';\n\nclass Component extends Nullstack {\n\n // ...\n\n async initiate() {\n const url = 'https://api.github.com/repos/nullstack/nullstack/issues';\n const response = await fetch(url);\n this.issues = await response.json();\n }\n\n // ...\n\n}\n\nexport default Component;\nServer only imports
Imported dependencies that are only used inside server functions will be excluded from the client bundle.
\nThis is useful for both accessing node.js exclusive modules and reducing the client bundle size by preprocessing data like markdown without having to expose the dependency to the end-user.
\nimport Nullstack from 'nullstack';\nimport {readFileSync} from 'fs';\nimport {Remarkable} from 'remarkable';\n\nclass Application extends Nullstack {\n\n static async getTasks() {\n const readme = readFileSync('README.md', 'utf-8');\n return new Remarkable().render(readme);\n }\n\n // ...\n\n}\n\nexport default Application;\nSecurity
Keep in mind that every server function is similar to an Express route in API and must be coded without depending on view logic for security.
\n\n\n🔒 Server functions with the name starting with "start" (and optionally followed by an uppercase letter) do not generate an API endpoint to avoid malicious context flooding.
\n
import Nullstack from 'nullstack';\n\nclass Component extends Nullstack {\n\n static async getCount({request, count}) {\n if(!request.session.user) return 0;\n return count;\n }\n\n // ...\n\n}\n\nexport default Component;\n\n\n💡 Server functions are not exposed to the client.
\n
\n\n✨ Learn more about the NJS file extension.
\n
Reserved words
Server function names cannot collide with instance method names from the current class or its parent classes.
\nThe following words cannot be used in server functions:
\n- \n
prepare\ninitiate\nhydrate\nupdate\nterminate\n
Server functions named start will not generate an API endpoint and can only be called by other server functions.
Caveats
Automatically generated API endpoints are not meant to be used by 3rd-party apps.
\nThe URL and implementation may change between versions of Nullstack.
\n\n\n✨ If you want to build an API, learn more about how to create an API with Nullstack.
\n
Next step
⚔ Learn about the context.
\n","description":"Server functions are specialized microservices that at transpile time are converted into API entry points"},"n-0-0-13":{},"n-0-0-15":{},"n-0-0-16":{"locale":"pt-BR","i18n":{"nullachan":{"alt":"Nulla-Chan","title":"Nulla-Chan: Waifu oficial do Nullstack"},"links":[{"title":"YouTube","href":"https://www.youtube.com/channel/UCUNPaxoppH3lu6JTrUX78Ww"},{"title":"Twitter","href":"https://twitter.com/nullstackapp"},{"title":"GitHub","href":"https://github.com/nullstack"}]}}}, "page": {"image":"/image-1200x630.png","status":200,"title":"Server Functions - Nullstack","description":"Server functions are specialized microservices that at transpile time are converted into API entry points"}} \ No newline at end of file diff --git a/docs/pt-br/geracao-de-sites-estaticos.html b/docs/pt-br/geracao-de-sites-estaticos.html deleted file mode 100644 index a0b7441c..00000000 --- a/docs/pt-br/geracao-de-sites-estaticos.html +++ /dev/null @@ -1,98 +0,0 @@ - - - - - -Use Nullstack para gerar websites estáticos para aplicações estáticas ultrarrápidas usando todo o potencial do cliente Nullstack sem a necessidade de haver um back-end de node.js.
-Websites estáticos são úteis para aplicações read-only como blogs e documentação
---💡 Esta documentação é na verdade um site estático gerado com Nullstack
-
Todos os benefícios de renderização no lado do servidor se aplicam para websites gerados estáticamente.
-Você pode gerar um website estático a partir da sua aplicação Nullstack com o seguinte comando npx:
npx create-nullstatic-app
---🔥 Você deve estar em uma pasta de projeto Nullstack para executar esse comando.
-
Por padrão, a sua aplicação Nullstack será criada na pasta static.
-Você pode mudar a pasta padrão por passá-la para o comando como um argumento:
-npx create-nullstatic-app docs
-O Nullstatic generator irá executar a sua aplicação no modo produção e irá rastrear cada link para uma rota interna que encontrar no seu DOM.
---💡 Certifique-se que a porta de produção do servidor se encontra livre quando executar esse comando.
-
O manifest.json e o conteúdo da pasta pública serão copiados para a pasta de destino.
-Além de gerar raw HTML também irá gerar um arquivo JSON para cada rota com uma cópia do estado.
-Na primeira visita para a sua aplicação estática, HTML será veiculado e hidratado.
-Nos pedidos subsequentes, Nullstack irá buscar o JSON gerado e atualizar o estado da aplicação sem que haja a necessidade de recarregar a página.
-Isso, na verdade, oferece não apenas um site estático gerado, mas um API gerado estaticamente que alimenta a Single Page Application sem nenhum custo.
-Boas Práticas
Você pode adicionar um script para a sua package.json a fim de gerar o seu website estático em uma pasta personalizada:
-{
- "name": "nullstack.github.io",
- "version": "0.0.1",
- "description": "",
- "author": "",
- "license": "ISC",
- "devDependencies": {
- "nullstack": "~0.9.0"
- },
- "scripts": {
- "start": "npx webpack --config node_modules/nullstack/webpack.config.js --mode=development --watch",
- "build": "npx webpack --config node_modules/nullstack/webpack.config.js --mode=production",
- "ssg": "npx create-nullstatic-app docs"
- }
-}
-
-Ressalvas
Nullstatic rastreia a sua aplicação apenas até a resolução de initiate, outras solicitações de API acionadas por eventos serão ignoradas.
Nullstatic rastreará um URL "/404" e gerará um "/404.html" e um "/404/index.html".
-Próximo passo
⚔ Aprenda mais sobre o trabalhador de serviço.
-Use Nullstack para gerar websites estáticos para aplicações estáticas ultrarrápidas usando todo o potencial do cliente Nullstack sem a necessidade de haver um back-end de node.js.
-Websites estáticos são úteis para aplicações read-only como blogs e documentação
---💡 Esta documentação é na verdade um site estático gerado com Nullstack
-
Todos os benefícios de renderização no lado do servidor se aplicam para websites gerados estáticamente.
-Você pode gerar um website estático a partir da sua aplicação Nullstack com o seguinte comando npx:
npx create-nullstatic-app
---🔥 Você deve estar em uma pasta de projeto Nullstack para executar esse comando.
-
Por padrão, a sua aplicação Nullstack será criada na pasta static.
-Você pode mudar a pasta padrão por passá-la para o comando como um argumento:
-npx create-nullstatic-app docs
-O Nullstatic generator irá executar a sua aplicação no modo produção e irá rastrear cada link para uma rota interna que encontrar no seu DOM.
---💡 Certifique-se que a porta de produção do servidor se encontra livre quando executar esse comando.
-
O manifest.json e o conteúdo da pasta pública serão copiados para a pasta de destino.
-Além de gerar raw HTML também irá gerar um arquivo JSON para cada rota com uma cópia do estado.
-Na primeira visita para a sua aplicação estática, HTML será veiculado e hidratado.
-Nos pedidos subsequentes, Nullstack irá buscar o JSON gerado e atualizar o estado da aplicação sem que haja a necessidade de recarregar a página.
-Isso, na verdade, oferece não apenas um site estático gerado, mas um API gerado estaticamente que alimenta a Single Page Application sem nenhum custo.
-Boas Práticas
Você pode adicionar um script para a sua package.json a fim de gerar o seu website estático em uma pasta personalizada:
-{
- "name": "nullstack.github.io",
- "version": "0.0.1",
- "description": "",
- "author": "",
- "license": "ISC",
- "devDependencies": {
- "nullstack": "~0.9.0"
- },
- "scripts": {
- "start": "npx webpack --config node_modules/nullstack/webpack.config.js --mode=development --watch",
- "build": "npx webpack --config node_modules/nullstack/webpack.config.js --mode=production",
- "ssg": "npx create-nullstatic-app docs"
- }
-}
-
-Ressalvas
Nullstatic rastreia a sua aplicação apenas até a resolução de initiate, outras solicitações de API acionadas por eventos serão ignoradas.
Nullstatic rastreará um URL "/404" e gerará um "/404.html" e um "/404/index.html".
-Próximo passo
⚔ Aprenda mais sobre o trabalhador de serviço.
-Use Nullstack para gerar websites estáticos para aplicações estáticas ultrarrápidas usando todo o potencial do cliente Nullstack sem a necessidade de haver um back-end de node.js.
\nWebsites estáticos são úteis para aplicações read-only como blogs e documentação
\n\n\n💡 Esta documentação é na verdade um site estático gerado com Nullstack
\n
Todos os benefícios de renderização no lado do servidor se aplicam para websites gerados estáticamente.
\nVocê pode gerar um website estático a partir da sua aplicação Nullstack com o seguinte comando npx:
npx create-nullstatic-app\n\n\n🔥 Você deve estar em uma pasta de projeto Nullstack para executar esse comando.
\n
Por padrão, a sua aplicação Nullstack será criada na pasta static.
\nVocê pode mudar a pasta padrão por passá-la para o comando como um argumento:
\nnpx create-nullstatic-app docs\nO Nullstatic generator irá executar a sua aplicação no modo produção e irá rastrear cada link para uma rota interna que encontrar no seu DOM.
\n\n\n💡 Certifique-se que a porta de produção do servidor se encontra livre quando executar esse comando.
\n
O manifest.json e o conteúdo da pasta pública serão copiados para a pasta de destino.
\nAlém de gerar raw HTML também irá gerar um arquivo JSON para cada rota com uma cópia do estado.
\nNa primeira visita para a sua aplicação estática, HTML será veiculado e hidratado.
\nNos pedidos subsequentes, Nullstack irá buscar o JSON gerado e atualizar o estado da aplicação sem que haja a necessidade de recarregar a página.
\nIsso, na verdade, oferece não apenas um site estático gerado, mas um API gerado estaticamente que alimenta a Single Page Application sem nenhum custo.
\nBoas Práticas
Você pode adicionar um script para a sua package.json a fim de gerar o seu website estático em uma pasta personalizada:
\n{\n \"name\": \"nullstack.github.io\",\n \"version\": \"0.0.1\",\n \"description\": \"\",\n \"author\": \"\",\n \"license\": \"ISC\",\n \"devDependencies\": {\n \"nullstack\": \"~0.9.0\"\n },\n \"scripts\": {\n \"start\": \"npx webpack --config node_modules/nullstack/webpack.config.js --mode=development --watch\",\n \"build\": \"npx webpack --config node_modules/nullstack/webpack.config.js --mode=production\",\n \"ssg\": \"npx create-nullstatic-app docs\"\n }\n}\n\nRessalvas
Nullstatic rastreia a sua aplicação apenas até a resolução de initiate, outras solicitações de API acionadas por eventos serão ignoradas.
Nullstatic rastreará um URL "/404" e gerará um "/404.html" e um "/404/index.html".
\nPróximo passo
⚔ Aprenda mais sobre o trabalhador de serviço.
\n","título":"Geração de Site Estático","descrição":"Use Nullstack para gerar websites estáticos para aplicações estáticas ultrarrápidas usando todo o potencial de Nullstack sem a necessidade de ter um back-end de node.js"},"n-0-0-13":{},"n-0-0-15":{},"n-0-0-16":{"locale":"pt-BR","i18n":{"nullachan":{"alt":"Nulla-Chan","title":"Nulla-Chan: Waifu oficial do Nullstack"},"links":[{"title":"YouTube","href":"https://www.youtube.com/channel/UCUNPaxoppH3lu6JTrUX78Ww"},{"title":"Twitter","href":"https://twitter.com/nullstackapp"},{"title":"GitHub","href":"https://github.com/nullstack"}]}}}, "page": {"image":"/image-1200x630.png","status":200,"title":"undefined - Nullstack"}} \ No newline at end of file diff --git a/docs/pt-br/index.html b/docs/pt-br/index.html deleted file mode 100644 index af0b34af..00000000 --- a/docs/pt-br/index.html +++ /dev/null @@ -1,258 +0,0 @@ - - - - - -Componentes Javascript Full-stack
para exércitos de um dev só
Nullstack é um framework full-stack para construir aplicações web progressivas.
Ele conecta uma camada de UI com estado a microserviços especializados no mesmo componente usando vanilla javascript.
Concentre-se em resolver sua lógica de negócios em vez de escrever código para interoperabilidade.
Renderização no Servidor
Nullstack gera HTML otimizado e com SEO pronto para o primeiro rascunho de sua rota em uma única requisição usando funções locais e com zero dependências javascript no cliente.
Single Page Application
Após hidratação, requisições irão buscar JSON de uma API gerada automaticamente por funções do servidor, atualizar o estado da aplicação e renderizar a página novamente.
Geração de Site Estático
Você pode até usar o Nullstack para gerar sites estáticos ultra-rápidos que servem HTML e se tornam uma Single Page Application usando uma API estática gerada automaticamente.
Recursos Completos como Componentes
Nullstack não é apenas outra parte de sua stack, mas sim a sua stack
Sua aplicação pode ser exportado do back-end para o front-end como um componente e montado em outra aplicação
import Nullstack from 'nullstack';
-
-class ProductList extends Nullstack {
-
- products = [];
-
- static async getProducts({ database }) {
- const [products] = await database.query(
- 'SELECT * FROM products'
- );
- return products;
- }
-
- async initiate() {
- this.products = await this.getProducts();
- }
-
- static async deleteProduct({ database, id }) {
- await database.query(
- 'DELETE FROM products WHERE id=?',
- [id]
- );
- }
-
- async remove({ id }) {
- await this.deleteProduct({ id });
- await this.initiate();
- }
-
- renderProduct({ id, name }) {
- return (
- <li>
- <button onclick={this.remove} id={id}>
- {name}
- </button>
- </li>
- )
- }
-
- render() {
- return (
- <ul>
- {this.products.map((product) => (
- <Product {...product} />
- ))}
- </ul>
- )
- }
-
-}
-
-export default ProductList;import Nullstack from 'nullstack';
-
-class ProductForm extends Nullstack {
-
- name = '';
- price = 0;
-
- static async getProductById({ database, id }) {
- const [products] = await database.query(
- 'SELECT * FROM products WHERE id=? LIMIT 1',
- [id]
- );
- return products[0];
- }
-
- async initiate({ params }) {
- const product = await this.getProductById({
- id: params.id
- });
- this.name = product.name;
- this.price = product.price;
- }
-
- static async updateProduct({ database, name, price, id }) {
- await database.query(
- 'UPDATE products SET name=?, price=? WHERE id=?',
- [name, price, id]
- );
- }
-
- async submit({ router, params }) {
- await this.updateProduct({
- id: params.id,
- name: this.name,
- price: this.price
- });
- router.url = '/products';
- }
-
- render() {
- return (
- <form onsubmit={this.submit}>
- <input class="form-control" bind={this.name} />
- <input type="number" step=".01" bind={this.price} />
- <button>Submit</button>
- </form>
- )
- }
-
-}
-
-export default ProductForm;O exemplo acima é o código completo de uma listagem de produtos e um formulário de edição sem esconder nenhuma linha.
Ambos os componentes invocam funções de servidor para ter acesso ao banco de dados MySQL no meio do JavaScript sem você ter que pensar em APIs.
A Produtividade está nos Detalhes
Os recursos do Nullstack foram extraídos de projetos da vida real com conveniência e consistência em mente
import Nullstack from 'nullstack';
-
-class Controlled extends Nullstack {
-
- count = 0;
-
- increment({delta}) {
- this.count += delta;
- }
-
- render() {
- return (
- <div>
- <button onclick={this.increment} delta={-1}>
- {this.count}
- </button>
- <span> {this.count} </span>
- <button onclick={this.increment} delta={1}>
- {this.count}
- </button>
- </div>
- )
- }
-
-}
-
-export default Controlled;import Nullstack from 'nullstack';
-
-class Binding extends Nullstack {
-
- number = 1;
- boolean = true;
-
- object = {number: 1};
- array = ['a', 'b', 'c'];
-
- render({params}) {
- return (
- <form>
- <input bind={this.number} />
- <input bind={this.boolean} type="checkbox" />
- <input bind={this.object.number} />
- {this.array.map((value, index) => (
- <input bind={this.array[index]} />
- ))}
- <input bind={params.page} />
- </form>
- )
- }
-
-}
-
-export default Binding;import Nullstack from 'nullstack';
-
-class Routes extends Nullstack {
-
- renderPost({params}) {
- return (
- <div>
- <div route="/post/getting-started">
- npx create-nullstack-app name
- </div>
- <div route="*"> {params.slug} </div>
- </div>
- )
- }
-
- render() {
- return (
- <div>
- <Post route="/post/:slug" />
- <a href="/post/hello-world"> Welcome </a>
- </div>
- )
- }
-
-}
-
-export default Routes;import Nullstack from 'nullstack';
-
-class Lifecycle extends Nullstack {
-
- prepare({environment}) {
- const {server, client} = environment;
- }
-
- async initiate({environment}) {
- const {server, client} = environment;
- }
-
- async hydrate({environment}) {
- const {client} = environment;
- }
-
- async update({environment}) {
- const {client} = environment;
- }
-
- async terminate({environment}) {
- const {client} = environment;
- }
-
-}
-
-export default Lifecycle;Assista aos nossos vídeos tutoriais do Nullstack
Nullstack se preocupa em tornar seu conteúdo o mais direto ao ponto e fácil de entender quanto possível
Por que você deve usar o Nullstack?
Desenvolvimento Escalável
Cada projeto começa pequeno e se torna complexo com o tempo. Escale conforme avança, não importa o tamanho da equipe.
Sem compromissos, sem imposições.Desenvolvimento Orientado a Recursos
Desenvolvimento de back e front end de um recurso no mesmo componente de forma organizada com facilidade de visão geral.
Verdadeira componentização e reutilização de código.Ecossistema já existente
Tira proveito de todo e qualquer pacote isomórfico em Vanilla Javascript já feito em toda história.
Todo o sua aplicação fala a mesma língua.Adapte-se rapidamente às mudanças de escopo
A estrutura horizontal, ao contrário de uma hierárquica, torna muito mais fácil mover os recursos.
Flexibilidade acima de burocracia.Inicialização da Aplicação
O arquivo index.js na raiz da aplicação é responsável por iniciar a aplicação.
-Quando você executa a aplicação com npm start ou node .production/server.js, o index chama a função start em seu src/Application.js.
A função start será executada apenas uma vez quando sua aplicação for inicializada e é um bom lugar para configurar seu contexto de servidor.
import Nullstack from 'nullstack';
-import database from './database';
-
-class Application extends Nullstack {
-
- static async start(context) {
- context.database = database;
- }
-
-}
-
-export default Application;
-Padrão de inicialização de dependência
Um bom padrão para trabalhar com dependências que requerem configurações em tempo de inicialização é definir uma função start na dependência e chamá-la na função start da aplicação passando o contexto do servidor.
import Nullstack from 'nullstack';
-import Dependency from './Dependency';
-
-class Application extends Nullstack {
-
- static async start(context) {
- Dependency.start(context);
- }
-
-}
-
-export default Application;
---🔒 As funções de servidor com o nome começando com "start" (e opcionalmente seguido por uma letra maiúscula) não geram um endpoint de API para evitar inundação de contexto malicioso.
-
Next step
⚔ Aprenda sobre a chave data do contexto.
Inicialização da Aplicação
O arquivo index.js na raiz da aplicação é responsável por iniciar a aplicação.
-Quando você executa a aplicação com npm start ou node .production/server.js, o index chama a função start em seu src/Application.js.
A função start será executada apenas uma vez quando sua aplicação for inicializada e é um bom lugar para configurar seu contexto de servidor.
import Nullstack from 'nullstack';
-import database from './database';
-
-class Application extends Nullstack {
-
- static async start(context) {
- context.database = database;
- }
-
-}
-
-export default Application;
-Padrão de inicialização de dependência
Um bom padrão para trabalhar com dependências que requerem configurações em tempo de inicialização é definir uma função start na dependência e chamá-la na função start da aplicação passando o contexto do servidor.
import Nullstack from 'nullstack';
-import Dependency from './Dependency';
-
-class Application extends Nullstack {
-
- static async start(context) {
- Dependency.start(context);
- }
-
-}
-
-export default Application;
---🔒 As funções de servidor com o nome começando com "start" (e opcionalmente seguido por uma letra maiúscula) não geram um endpoint de API para evitar inundação de contexto malicioso.
-
Next step
⚔ Aprenda sobre a chave data do contexto.
O arquivo index.js na raiz da aplicação é responsável por iniciar a aplicação.
\nQuando você executa a aplicação com npm start ou node .production/server.js, o index chama a função start em seu src/Application.js.
A função start será executada apenas uma vez quando sua aplicação for inicializada e é um bom lugar para configurar seu contexto de servidor.
import Nullstack from 'nullstack';\nimport database from './database';\n\nclass Application extends Nullstack {\n\n static async start(context) {\n context.database = database;\n }\n\n}\n\nexport default Application;\nPadrão de inicialização de dependência
Um bom padrão para trabalhar com dependências que requerem configurações em tempo de inicialização é definir uma função start na dependência e chamá-la na função start da aplicação passando o contexto do servidor.
import Nullstack from 'nullstack';\nimport Dependency from './Dependency';\n\nclass Application extends Nullstack {\n\n static async start(context) {\n Dependency.start(context);\n }\n\n}\n\nexport default Application;\n\n\n🔒 As funções de servidor com o nome começando com "start" (e opcionalmente seguido por uma letra maiúscula) não geram um endpoint de API para evitar inundação de contexto malicioso.
\n
Next step
⚔ Aprenda sobre a chave data do contexto.
self da Instância
-
-
- Tipo:
object
- - Origem: Contexto Nullstack -
- Disponibilidade: client -
- readonly no contexto do client -
Ele te dá informações sobre o ciclo de vida da instância e sua key única.
Cada instância recebe seu própio objeto self.
As seguintes keys estão disponíveis no objeto:
--
-
- initiated:
boolean
- - hydrated:
boolean
- - prerendered:
boolean
- - element:
HTMLElement
- key:string
-
Quando um método do ciclo de vida é resolvido, mesmo que não declarado, uma chave equivalente é setada para true no self.
Se o componente tiver sido renderizado no lado do servidor a chave prerendered continuará como true até que seja finalizado.
A chave element aponta para o seletor na DOM e sua existência só é garantida quando o hydrate está sendo chamado, pois prepare e initiate podem estar rodando no servidor.
--💡 Não use a chave
-elementpara adivinhar o ambiente, ao invés useenvironmentpara isso.
Observar o self é um bom jeito de evitar dar informações irrelevantes para o usuário final
import Nullstack from 'nullstack';
-
-class Page extends Nullstack {
-
- // ...
-
- async initiate() {
- this.price = await this.getPrice();
- }
-
- async hydrate({self}) {
- self.element.querySelector('input').focus();
- }
-
- render({self}) {
- if(!self.prerendered && !self.initiated) return false;
- return (
- <form>
- <input type="number" bind={this.price} />
- <button disabled={!self.hydrated}>
- Save
- </button>
- </form>
- )
- }
-
-}
-
-export default Page;
---💡 Componentes que estão otimizados em functional components não tem acesso ao
-self.
key da Instância
-
-
- Tipo:
string
- - Origem: Contexto Componente -
- Disponibilidade: client -
- readonly no contexto do client ou depois de definido seu valor como atributo -
Ele permite que você persista a instância quando é movida no DOM.
-Você pode declarar uma key por instância.
--💡 Se você não declarar a
-keyo nullstack irá gerar uma baseada na profundidade da dom.
--🔥 As keys não podem começar com "_." para evitar conflito com as keys geradas pelo Nullstack
-
As keys devem ser globalmente únicas já que o componente poderá ser movido para qualquer lugar da DOM e não apenas entre os componentes irmãos.
-Preservando o estado
As keys são úteis para preservar o estado em componentes com estado quando você os move para dentro da DOM.
-Isto é especialmente útil para listas com tamanho dinâmico que invocam os componentes.
-import Nullstack from 'nullstack';
-import Item from './Item';
-
-class List extends Nullstack {
-
- // ...
-
- async initiate() {
- this.items = await this.getItems();
- }
-
- render({self}) {
- const componentKey = self.key;
- return (
- <ul>
- {this.items.map((item) => (
- <Item key={`${componentKey}-${item.id}`} {...item} />
- ))}
- </ul>
- )
- }
-
-}
-
-export default Page;
-Instâncias compartilhadas
Você também pode usar as keys para compartilhar a instância entre dois elementos.
-Apenas o primeiro encontro da key irá executar o lifecycle.
import Nullstack from 'nullstack';
-
-class Counter extends Nullstack {
-
- count = 0;
-
- render({amount}) {
- return (
- <div>
- <button onclick={{count: this.count+1}}>
- {this.count} x {amount} = {this.count * amount}
- </button>
- </div>
- )
- }
-
-}
-
-export default Counter;
-import Nullstack from 'nullstack';
-import Counter from './Counter';
-
-class Application extends Nullstack {
-
- render() {
- return (
- <main>
- <Counter key="a" amount={1} />
- <Counter key="b" amount={2} />
- <Counter key="b" amount={3} />
- </main>
- )
- }
-
-}
-
-export default Application;
-key da Instância
-
-
- Tipo:
string
- - Origem: Contexto Componente -
- Disponibilidade: client -
- readonly no contexto do client ou depois de definido seu valor como atributo -
Ele permite que você persista a instância quando é movida no DOM.
-Você pode declarar uma key por instância.
---💡 Se você não declarar a key o nullstack irá gerar uma baseada na profundidade da dom
-
--🔥 As keys não podem começar com "_." para evitar conflito com as keys geradas pelo Nullstack
-
As keys devem ser globalmente únicas já que o componente poderá ser movido para qualquer lugar da DOM e não apenas entre os componentes irmãos.
-Preservando o estado
As keys são úteis para preservar o estado em componentes com estado quando você os move para dentro da DOM.
-Isto é especialmente útil para listas com tamanho dinâmico que invocam os componentes.
-import Nullstack from 'nullstack';
-import Item from './Item';
-
-class List extends Nullstack {
-
- // ...
-
- async initiate() {
- this.items = await this.getItems();
- }
-
- render({self}) {
- const componentKey = self.key;
- return (
- <ul>
- {this.items.map((item) => (
- <Item key={`${componentKey}-${item.id}`} {...item} />
- ))}
- </ul>
- )
- }
-
-}
-
-export default Page;
-Instâncias compartilhadas
Você também pode usar as keys para compartilhar a instância entre dois elementos.
-Apenas o primeiro encontro da key irá executar o lifecycle
-import Nullstack from 'nullstack';
-
-class Counter extends Nullstack {
-
- count = 0;
-
- render({amount}) {
- return (
- <div>
- <button onclick={{count: this.count+1}}>
- {this.count} x {amount} = {this.count * amount}
- </button>
- </div>
- )
- }
-
-}
-
-export default Counter;
-import Nullstack from 'nullstack';
-import Counter from './Counter';
-
-class Application extends Nullstack {
-
- render() {
- return (
- <main>
- <Counter key="a" amount={1} />
- <Counter key="b" amount={2} />
- <Counter key="b" amount={3} />
- </main>
- )
- }
-
-}
-
-export default Application;
-Próximo passo
⚔ Aprenda sobre requisicao e resposta do servidor.
-self da Instância
-
-
- Tipo:
object
- - Origem: Contexto Nullstack -
- Disponibilidade: client -
- readonly no contexto do client -
Ele te dá informações sobre o ciclo de vida da instância e sua key única.
Cada instância recebe seu própio objeto self.
As seguintes keys estão disponíveis no objeto:
--
-
- initiated:
boolean
- - hydrated:
boolean
- - prerendered:
boolean
- - element:
HTMLElement
- key:string
-
Quando um método do ciclo de vida é resolvido, mesmo que não declarado, uma chave equivalente é setada para true no self.
Se o componente tiver sido renderizado no lado do servidor a chave prerendered continuará como true até que seja finalizado.
A chave element aponta para o seletor na DOM e sua existência só é garantida quando o hydrate está sendo chamado, pois prepare e initiate podem estar rodando no servidor.
--💡 Não use a chave
-elementpara adivinhar o ambiente, ao invés useenvironmentpara isso.
Observar o self é um bom jeito de evitar dar informações irrelevantes para o usuário final
import Nullstack from 'nullstack';
-
-class Page extends Nullstack {
-
- // ...
-
- async initiate() {
- this.price = await this.getPrice();
- }
-
- async hydrate({self}) {
- self.element.querySelector('input').focus();
- }
-
- render({self}) {
- if(!self.prerendered && !self.initiated) return false;
- return (
- <form>
- <input type="number" bind={this.price} />
- <button disabled={!self.hydrated}>
- Save
- </button>
- </form>
- )
- }
-
-}
-
-export default Page;
---💡 Componentes que estão otimizados em functional components não tem acesso ao
-self.
key da Instância
-
-
- Tipo:
string
- - Origem: Contexto Componente -
- Disponibilidade: client -
- readonly no contexto do client ou depois de definido seu valor como atributo -
Ele permite que você persista a instância quando é movida no DOM.
-Você pode declarar uma key por instância.
--💡 Se você não declarar a
-keyo nullstack irá gerar uma baseada na profundidade da dom.
--🔥 As keys não podem começar com "_." para evitar conflito com as keys geradas pelo Nullstack
-
As keys devem ser globalmente únicas já que o componente poderá ser movido para qualquer lugar da DOM e não apenas entre os componentes irmãos.
-Preservando o estado
As keys são úteis para preservar o estado em componentes com estado quando você os move para dentro da DOM.
-Isto é especialmente útil para listas com tamanho dinâmico que invocam os componentes.
-import Nullstack from 'nullstack';
-import Item from './Item';
-
-class List extends Nullstack {
-
- // ...
-
- async initiate() {
- this.items = await this.getItems();
- }
-
- render({self}) {
- const componentKey = self.key;
- return (
- <ul>
- {this.items.map((item) => (
- <Item key={`${componentKey}-${item.id}`} {...item} />
- ))}
- </ul>
- )
- }
-
-}
-
-export default Page;
-Instâncias compartilhadas
Você também pode usar as keys para compartilhar a instância entre dois elementos.
-Apenas o primeiro encontro da key irá executar o lifecycle.
import Nullstack from 'nullstack';
-
-class Counter extends Nullstack {
-
- count = 0;
-
- render({amount}) {
- return (
- <div>
- <button onclick={{count: this.count+1}}>
- {this.count} x {amount} = {this.count * amount}
- </button>
- </div>
- )
- }
-
-}
-
-export default Counter;
-import Nullstack from 'nullstack';
-import Counter from './Counter';
-
-class Application extends Nullstack {
-
- render() {
- return (
- <main>
- <Counter key="a" amount={1} />
- <Counter key="b" amount={2} />
- <Counter key="b" amount={3} />
- </main>
- )
- }
-
-}
-
-export default Application;
-key da Instância
-
-
- Tipo:
string
- - Origem: Contexto Componente -
- Disponibilidade: client -
- readonly no contexto do client ou depois de definido seu valor como atributo -
Ele permite que você persista a instância quando é movida no DOM.
-Você pode declarar uma key por instância.
---💡 Se você não declarar a key o nullstack irá gerar uma baseada na profundidade da dom
-
--🔥 As keys não podem começar com "_." para evitar conflito com as keys geradas pelo Nullstack
-
As keys devem ser globalmente únicas já que o componente poderá ser movido para qualquer lugar da DOM e não apenas entre os componentes irmãos.
-Preservando o estado
As keys são úteis para preservar o estado em componentes com estado quando você os move para dentro da DOM.
-Isto é especialmente útil para listas com tamanho dinâmico que invocam os componentes.
-import Nullstack from 'nullstack';
-import Item from './Item';
-
-class List extends Nullstack {
-
- // ...
-
- async initiate() {
- this.items = await this.getItems();
- }
-
- render({self}) {
- const componentKey = self.key;
- return (
- <ul>
- {this.items.map((item) => (
- <Item key={`${componentKey}-${item.id}`} {...item} />
- ))}
- </ul>
- )
- }
-
-}
-
-export default Page;
-Instâncias compartilhadas
Você também pode usar as keys para compartilhar a instância entre dois elementos.
-Apenas o primeiro encontro da key irá executar o lifecycle
-import Nullstack from 'nullstack';
-
-class Counter extends Nullstack {
-
- count = 0;
-
- render({amount}) {
- return (
- <div>
- <button onclick={{count: this.count+1}}>
- {this.count} x {amount} = {this.count * amount}
- </button>
- </div>
- )
- }
-
-}
-
-export default Counter;
-import Nullstack from 'nullstack';
-import Counter from './Counter';
-
-class Application extends Nullstack {
-
- render() {
- return (
- <main>
- <Counter key="a" amount={1} />
- <Counter key="b" amount={2} />
- <Counter key="b" amount={3} />
- </main>
- )
- }
-
-}
-
-export default Application;
-Próximo passo
⚔ Aprenda sobre requisicao e resposta do servidor.
-- \n
- Tipo:
object\n - Origem: Contexto Nullstack \n
- Disponibilidade: client \n
- readonly no contexto do client \n
Ele te dá informações sobre o ciclo de vida da instância e sua key única.
Cada instância recebe seu própio objeto self.
As seguintes keys estão disponíveis no objeto:
\n- \n
- initiated:
boolean\n - hydrated:
boolean\n - prerendered:
boolean\n - element:
HTMLElement\n key:string\n
Quando um método do ciclo de vida é resolvido, mesmo que não declarado, uma chave equivalente é setada para true no self.
Se o componente tiver sido renderizado no lado do servidor a chave prerendered continuará como true até que seja finalizado.
A chave element aponta para o seletor na DOM e sua existência só é garantida quando o hydrate está sendo chamado, pois prepare e initiate podem estar rodando no servidor.
\n\n💡 Não use a chave
\nelementpara adivinhar o ambiente, ao invés useenvironmentpara isso.
Observar o self é um bom jeito de evitar dar informações irrelevantes para o usuário final
import Nullstack from 'nullstack';\n\nclass Page extends Nullstack {\n\n // ...\n\n async initiate() {\n this.price = await this.getPrice();\n }\n\n async hydrate({self}) {\n self.element.querySelector('input').focus();\n }\n \n render({self}) {\n if(!self.prerendered && !self.initiated) return false;\n return (\n <form> \n <input type=\"number\" bind={this.price} />\n <button disabled={!self.hydrated}> \n Save\n </button>\n </form>\n )\n }\n\n}\n\nexport default Page;\n\n\n💡 Componentes que estão otimizados em functional components não tem acesso ao
\nself.
key da Instância
- \n
- Tipo:
string\n - Origem: Contexto Componente \n
- Disponibilidade: client \n
- readonly no contexto do client ou depois de definido seu valor como atributo \n
Ele permite que você persista a instância quando é movida no DOM.
\nVocê pode declarar uma key por instância.
\n\n💡 Se você não declarar a
\nkeyo nullstack irá gerar uma baseada na profundidade da dom.
\n\n🔥 As keys não podem começar com "_." para evitar conflito com as keys geradas pelo Nullstack
\n
As keys devem ser globalmente únicas já que o componente poderá ser movido para qualquer lugar da DOM e não apenas entre os componentes irmãos.
\nPreservando o estado
As keys são úteis para preservar o estado em componentes com estado quando você os move para dentro da DOM.
\nIsto é especialmente útil para listas com tamanho dinâmico que invocam os componentes.
\nimport Nullstack from 'nullstack';\nimport Item from './Item';\n\nclass List extends Nullstack {\n\n // ...\n\n async initiate() {\n this.items = await this.getItems();\n }\n \n render({self}) {\n const componentKey = self.key;\n return (\n <ul> \n {this.items.map((item) => (\n <Item key={`${componentKey}-${item.id}`} {...item} />\n ))}\n </ul>\n )\n }\n\n}\n\nexport default Page;\nInstâncias compartilhadas
Você também pode usar as keys para compartilhar a instância entre dois elementos.
\nApenas o primeiro encontro da key irá executar o lifecycle.
import Nullstack from 'nullstack';\n\nclass Counter extends Nullstack {\n\n count = 0;\n\n render({amount}) {\n return (\n <div>\n <button onclick={{count: this.count+1}}>\n {this.count} x {amount} = {this.count * amount}\n </button> \n </div>\n )\n }\n\n}\n\nexport default Counter;\nimport Nullstack from 'nullstack';\nimport Counter from './Counter';\n\nclass Application extends Nullstack {\n\n render() {\n return (\n <main>\n <Counter key=\"a\" amount={1} />\n <Counter key=\"b\" amount={2} />\n <Counter key=\"b\" amount={3} />\n </main>\n )\n }\n\n}\n\nexport default Application;\nkey da Instância
- \n
- Tipo:
string\n - Origem: Contexto Componente \n
- Disponibilidade: client \n
- readonly no contexto do client ou depois de definido seu valor como atributo \n
Ele permite que você persista a instância quando é movida no DOM.
\nVocê pode declarar uma key por instância.
\n\n\n💡 Se você não declarar a key o nullstack irá gerar uma baseada na profundidade da dom
\n
\n\n🔥 As keys não podem começar com "_." para evitar conflito com as keys geradas pelo Nullstack
\n
As keys devem ser globalmente únicas já que o componente poderá ser movido para qualquer lugar da DOM e não apenas entre os componentes irmãos.
\nPreservando o estado
As keys são úteis para preservar o estado em componentes com estado quando você os move para dentro da DOM.
\nIsto é especialmente útil para listas com tamanho dinâmico que invocam os componentes.
\nimport Nullstack from 'nullstack';\nimport Item from './Item';\n\nclass List extends Nullstack {\n\n // ...\n\n async initiate() {\n this.items = await this.getItems();\n }\n \n render({self}) {\n const componentKey = self.key;\n return (\n <ul> \n {this.items.map((item) => (\n <Item key={`${componentKey}-${item.id}`} {...item} />\n ))}\n </ul>\n )\n }\n\n}\n\nexport default Page;\nInstâncias compartilhadas
Você também pode usar as keys para compartilhar a instância entre dois elementos.
\nApenas o primeiro encontro da key irá executar o lifecycle
\nimport Nullstack from 'nullstack';\n\nclass Counter extends Nullstack {\n\n count = 0;\n\n render({amount}) {\n return (\n <div>\n <button onclick={{count: this.count+1}}>\n {this.count} x {amount} = {this.count * amount}\n </button> \n </div>\n )\n }\n\n}\n\nexport default Counter;\nimport Nullstack from 'nullstack';\nimport Counter from './Counter';\n\nclass Application extends Nullstack {\n\n render() {\n return (\n <main>\n <Counter key=\"a\" amount={1} />\n <Counter key=\"b\" amount={2} />\n <Counter key=\"b\" amount={3} />\n </main>\n )\n }\n\n}\n\nexport default Application;\nPróximo passo
⚔ Aprenda sobre requisicao e resposta do servidor.
\n","description":"O objeto self é um proxy no Contexto Nullstack disponível no client e te dá informações sobre o ciclo de vida da instância"},"n-0-0-13":{},"n-0-0-15":{},"n-0-0-16":{"locale":"pt-BR","i18n":{"nullachan":{"alt":"Nulla-Chan","title":"Nulla-Chan: Waifu oficial do Nullstack"},"links":[{"title":"YouTube","href":"https://www.youtube.com/channel/UCUNPaxoppH3lu6JTrUX78Ww"},{"title":"Twitter","href":"https://twitter.com/nullstackapp"},{"title":"GitHub","href":"https://github.com/nullstack"}]}}}, "page": {"image":"/image-1200x630.png","status":200,"title":"self da Instância - Nullstack","description":"O objeto self é um proxy no Contexto Nullstack disponível no client e te dá informações sobre o ciclo de vida da instância"}} \ No newline at end of file diff --git a/docs/pt-br/renderizacao-no-servidor.html b/docs/pt-br/renderizacao-no-servidor.html deleted file mode 100644 index c1ec51aa..00000000 --- a/docs/pt-br/renderizacao-no-servidor.html +++ /dev/null @@ -1,54 +0,0 @@ - - - - - -Página Não Encontrada
Talvez você queira aprender como criar uma pagina 404 com Nullstack?
-Se você está procurando por outra coisa, você deveria ler a documentação.
-Página Não Encontrada
Talvez você queira aprender como criar uma pagina 404 com Nullstack?
-Se você está procurando por outra coisa, você deveria ler a documentação.
-Talvez você queira aprender como criar uma pagina 404 com Nullstack?
\nSe você está procurando por outra coisa, você deveria ler a documentação.
\n","description":"Desculpe, essa não é a página que você está procurando","status":404},"n-0-0-13":{},"n-0-0-15":{},"n-0-0-16":{"locale":"pt-BR","i18n":{"nullachan":{"alt":"Nulla-Chan","title":"Nulla-Chan: Waifu oficial do Nullstack"},"links":[{"title":"YouTube","href":"https://www.youtube.com/channel/UCUNPaxoppH3lu6JTrUX78Ww"},{"title":"Twitter","href":"https://twitter.com/nullstackapp"},{"title":"GitHub","href":"https://github.com/nullstack"}]}}}, "page": {"image":"/image-1200x630.png","status":404,"title":"Página Não Encontrada - Nullstack","description":"Desculpe, essa não é a página que você está procurando"}} \ No newline at end of file diff --git a/docs/pt-br/renderizando-no-servidor.html b/docs/pt-br/renderizando-no-servidor.html deleted file mode 100644 index 25eb6cc1..00000000 --- a/docs/pt-br/renderizando-no-servidor.html +++ /dev/null @@ -1,61 +0,0 @@ - - - - - -Server-Side Rendering
Nullstack optimizes SEO and response times out of the box by generating HTML for the route that you enter the application from.
-Server-side rendering is good for SEO since it gives as fast as possible crawlable markup for search engines.
-Nullstack starts the application for the user by first serving HTML of only the requested page with no overhead.
-Before serving the HTML, Nullstack will wait for prepare and initiate of all components of that route to be resolved.
-While server-side rendering all server functions run locally without the need to fetch an API, making the process even faster.
-After the document is already painted in the browser, Nullstack loads the javascript client bundle and starts the hydration process.
-No further requests to the server are made to recover the application state during hydration.
-The page head will generate the necessary meta tags for SEO based on the contents of the project and page context keys.
-Next step
⚔ Learn about static site generation.
-Server-Side Rendering
Nullstack optimizes SEO and response times out of the box by generating HTML for the route that you enter the application from.
-Server-side rendering is good for SEO since it gives as fast as possible crawlable markup for search engines.
-Nullstack starts the application for the user by first serving HTML of only the requested page with no overhead.
-Before serving the HTML, Nullstack will wait for prepare and initiate of all components of that route to be resolved.
-While server-side rendering all server functions run locally without the need to fetch an API, making the process even faster.
-After the document is already painted in the browser, Nullstack loads the javascript client bundle and starts the hydration process.
-No further requests to the server are made to recover the application state during hydration.
-The page head will generate the necessary meta tags for SEO based on the contents of the project and page context keys.
-Next step
⚔ Learn about static site generation.
-Nullstack optimizes SEO and response times out of the box by generating HTML for the route that you enter the application from.
\nServer-side rendering is good for SEO since it gives as fast as possible crawlable markup for search engines.
\nNullstack starts the application for the user by first serving HTML of only the requested page with no overhead.
\nBefore serving the HTML, Nullstack will wait for prepare and initiate of all components of that route to be resolved.
\nWhile server-side rendering all server functions run locally without the need to fetch an API, making the process even faster.
\nAfter the document is already painted in the browser, Nullstack loads the javascript client bundle and starts the hydration process.
\nNo further requests to the server are made to recover the application state during hydration.
\nThe page head will generate the necessary meta tags for SEO based on the contents of the project and page context keys.
\nNext step
⚔ Learn about static site generation.
\n","description":"Nullstack optimizes SEO and response times out of the box by generating HTML for the route that you enter the application from"},"n-0-0-13":{},"n-0-0-15":{},"n-0-0-16":{"locale":"pt-BR","i18n":{"nullachan":{"alt":"Nulla-Chan","title":"Nulla-Chan: Waifu oficial do Nullstack"},"links":[{"title":"YouTube","href":"https://www.youtube.com/channel/UCUNPaxoppH3lu6JTrUX78Ww"},{"title":"Twitter","href":"https://twitter.com/nullstackapp"},{"title":"GitHub","href":"https://github.com/nullstack"}]}}}, "page": {"image":"/image-1200x630.png","status":200,"title":"Server-Side Rendering - Nullstack","description":"Nullstack optimizes SEO and response times out of the box by generating HTML for the route that you enter the application from"}} \ No newline at end of file diff --git a/docs/pt-br/requisicao-e-resposta-do-servidor.html b/docs/pt-br/requisicao-e-resposta-do-servidor.html deleted file mode 100644 index 34a63393..00000000 --- a/docs/pt-br/requisicao-e-resposta-do-servidor.html +++ /dev/null @@ -1,129 +0,0 @@ - - - - - -Requisição e resposta do servidor
A key do servidor
A key do servidor é um proxy em volta de uma instância do Express que roda por baixo dos panos.
-O objeto do servidor está presenta apenas no contexto do servidor.
-As seguintes funções são redirecionadas para o servidor Express:
--
-
get
-post
-put
-patch
-delete
-options
-head
-use
-
--✨ Se você quer aprender como fazer uma API com Nullstack, este é o caminho.
-
import Nullstack from 'nullstack';
-
-class Application extends Nullstack {
-
- static async start({server}) {
- server.get('/api/books', (request, response) => {
- response.json({books: []});
- });
- }
-
- // ...
-
-}
-
-export default Application;
-Outras keys disponíveis são:
--
-
- port:
integer
- - maximumPayloadSize:
string
- - cors:
object
-
import Nullstack from 'nullstack';
-
-class Application extends Nullstack {
-
- static async start({server}) {
- server.port = 3000;
- server.maximumPayloadSize = '5mb';
- server.cors = {
- origin: 'http://localhost:6969',
- optionsSuccessStatus: 200
- }
- }
-
- // ...
-
-}
-
-export default Application;
-O objeto cors será passado como argumento para o plugin do cors no express.
Requisição e resposta
Todo contexto de função do servidor é mesclado com os objetos request e response originais do Express.
Se você der uma resposta manualmente ela irá sobrescrever a response server-side rendering do framework.
import Nullstack from 'nullstack';
-
-class Application extends Nullstack {
-
- static async getBooks({request, response}) {
- if(!request.session.user) {
- response.status(401).json({unauthorized: true});
- }
- }
-
- // ...
-
-}
-
-export default Application;
-Próximo passo
⚔ Aprenda sobre estilos.
-Requisição e resposta do servidor
A key do servidor
A key do servidor é um proxy em volta de uma instância do Express que roda por baixo dos panos.
-O objeto do servidor está presenta apenas no contexto do servidor.
-As seguintes funções são redirecionadas para o servidor Express:
--
-
get
-post
-put
-patch
-delete
-options
-head
-use
-
--✨ Se você quer aprender como fazer uma API com Nullstack, este é o caminho.
-
import Nullstack from 'nullstack';
-
-class Application extends Nullstack {
-
- static async start({server}) {
- server.get('/api/books', (request, response) => {
- response.json({books: []});
- });
- }
-
- // ...
-
-}
-
-export default Application;
-Outras keys disponíveis são:
--
-
- port:
integer
- - maximumPayloadSize:
string
- - cors:
object
-
import Nullstack from 'nullstack';
-
-class Application extends Nullstack {
-
- static async start({server}) {
- server.port = 3000;
- server.maximumPayloadSize = '5mb';
- server.cors = {
- origin: 'http://localhost:6969',
- optionsSuccessStatus: 200
- }
- }
-
- // ...
-
-}
-
-export default Application;
-O objeto cors será passado como argumento para o plugin do cors no express.
Requisição e resposta
Todo contexto de função do servidor é mesclado com os objetos request e response originais do Express.
Se você der uma resposta manualmente ela irá sobrescrever a response server-side rendering do framework.
import Nullstack from 'nullstack';
-
-class Application extends Nullstack {
-
- static async getBooks({request, response}) {
- if(!request.session.user) {
- response.status(401).json({unauthorized: true});
- }
- }
-
- // ...
-
-}
-
-export default Application;
-Próximo passo
⚔ Aprenda sobre estilos.
-A key do servidor
A key do servidor é um proxy em volta de uma instância do Express que roda por baixo dos panos.
\nO objeto do servidor está presenta apenas no contexto do servidor.
\nAs seguintes funções são redirecionadas para o servidor Express:
\n- \n
get\npost\nput\npatch\ndelete\noptions\nhead\nuse\n
\n\n✨ Se você quer aprender como fazer uma API com Nullstack, este é o caminho.
\n
import Nullstack from 'nullstack';\n\nclass Application extends Nullstack {\n\n static async start({server}) {\n server.get('/api/books', (request, response) => {\n response.json({books: []});\n });\n }\n\n // ...\n\n}\n\nexport default Application;\nOutras keys disponíveis são:
\n- \n
- port:
integer\n - maximumPayloadSize:
string\n - cors:
object\n
import Nullstack from 'nullstack';\n\nclass Application extends Nullstack {\n\n static async start({server}) {\n server.port = 3000;\n server.maximumPayloadSize = '5mb';\n server.cors = {\n origin: 'http://localhost:6969',\n optionsSuccessStatus: 200\n }\n }\n\n // ...\n\n}\n\nexport default Application;\nO objeto cors será passado como argumento para o plugin do cors no express.
Requisição e resposta
Todo contexto de função do servidor é mesclado com os objetos request e response originais do Express.
Se você der uma resposta manualmente ela irá sobrescrever a response server-side rendering do framework.
import Nullstack from 'nullstack';\n\nclass Application extends Nullstack {\n\n static async getBooks({request, response}) {\n if(!request.session.user) {\n response.status(401).json({unauthorized: true});\n }\n }\n\n // ...\n\n}\n\nexport default Application;\nPróximo passo
⚔ Aprenda sobre estilos.
\n","description":"A key do servidor é um proxy em volta da instância do express, que roda o Nullstack por baixo dos panos"},"n-0-0-13":{},"n-0-0-15":{},"n-0-0-16":{"locale":"pt-BR","i18n":{"nullachan":{"alt":"Nulla-Chan","title":"Nulla-Chan: Waifu oficial do Nullstack"},"links":[{"title":"YouTube","href":"https://www.youtube.com/channel/UCUNPaxoppH3lu6JTrUX78Ww"},{"title":"Twitter","href":"https://twitter.com/nullstackapp"},{"title":"GitHub","href":"https://github.com/nullstack"}]}}}, "page": {"image":"/image-1200x630.png","status":200,"title":"Requisição e resposta do servidor - Nullstack","description":"A key do servidor é um proxy em volta da instância do express, que roda o Nullstack por baixo dos panos"}} \ No newline at end of file diff --git a/docs/pt-br/rotas-e-parametros.html b/docs/pt-br/rotas-e-parametros.html deleted file mode 100644 index f01f97bb..00000000 --- a/docs/pt-br/rotas-e-parametros.html +++ /dev/null @@ -1,298 +0,0 @@ - - - - - -Rotas e Parâmetros
Nullstack tem rotas embutidas, não faria sentido não ser assim já que se espera que aplicações web tenham hyperlinks.
-Qualquer tag pode receber um atributo route, seja um componente, componente interno ou uma tag HTML simples.
import Nullstack from 'nullstack';
-import Page from './Page';
-
-class Application extends Nullstack {
-
- renderHome() {
- return (
- <section> Home </section>
- )
- }
-
- render({count}) {
- return (
- <main>
- <Home route="/" />
- <Page route="/page" />
- <abbr route="/abbreviations"> Abreviações </abbr>
- </main>
- )
- }
-
-}
-
-export default Application;
-Links
Links no Nullstack são tags a simples com o valor de href começando com "/".
<a href="/page/about"> Página About </a>
---💡 No lado do cliente o evento de clique modificará o histórico sem recarregar a página.
-
--✨ Você ainda pode atribuir seu próprio evento de clique para a tag sem perder o comportamento do framework.
-
Parâmetros
A chave params é um proxy de objeto injetado em cada instância de cliente.
Cada parâmetro da string de query é mapeado para esse objeto.
-Por padrão qualquer chave requisitada deste objeto retornará uma string.
-Se o valor for undefined retornará uma string vazia.
Se o valor for true ou false retornará um boleano, ao invés de uma string.
--🐱💻 Abaixo um exemplo que visita "/books?expanded=true&page=2":
-
import Nullstack from 'nullstack';
-
-class Books extends Nullstack {
-
- async initiate({params}) {
- if(params.expanded) {
- const page = parseInt(params.page) || 1;
- this.books = await this.getBooks({page});
- }
- }
-
-}
-
-export default Books;
-Realizar atribuição para uma chave de params causará um redirecionamento para a rota com os parâmetros atualizados.
Quando realizar atribuição para um parâmetro, o valor será convertido para JSON antes de ser definido.
---💡 Redirecionamentos funcionam em lotes, então não há perca de performance em multiplas atribuições.
-
import Nullstack from 'nullstack';
-
-class Paginator extends Nullstack {
-
- handleClick({params}) {
- params.filter = '';
- params.page = 1;
- }
-
-}
-
-export default Paginator;
-Atribuir uma string vazia a um parâmetro irá removê-lo da url.
-Segmentos Dinâmicos
Parte da rota pode ser uma expressão começada com ":" segida por um nome de parâmetro.
-Esse valor será comparado com qualquer string na mesma posição de diretório.
-O valor da string na URL será atribuído para o contexto, parâmetros e funções abaixo desse ponto na hierarquia terão acesso a nova chave.
---🐱💻 Abaixo um exemplo que visita "/category/suspense?page=2":
-
import Nullstack from 'nullstack';
-
-class Books extends Nullstack {
-
- async initiate({params}) {
- const page = parseInt(params.page) || 1;
- const category = params.slug;
- this.books = await this.getBooks({category, page});
- }
-
-}
-
-export default Books;
-import Nullstack from 'nullstack';
-import Books from './Books';
-
-class Application extends Nullstack {
-
- render() {
- <main>
- <Books route="/category/:slug">
- </main>
- }
-
-}
-
-export default Application;
-Quando um segmento dinâmico é alterado, como por exemplo mover de "/category/suspense" para "/category/comedy", o componente será desfeito e uma nova instância será criada.
-Mudar um parâmetro de consulta não re-instnaciará o componente.
-Os filhos do componente não serão re-instanciados automaticamente, você pode definir a mesma rota para os filhos ou fazer isso manualmente se desejar esse comportamento.
---💡 O comportamento mencionado acima resolve muitos dos problemas que você teria normalmente que lidar manualmente.
-
Curingas
Curingas são rotas declaradas com "*" como valor do atributo
-Essas rotas corresponderão a qualquer coisa se nada acima delas corresponder a URL requisitada.
-import Nullstack from 'nullstack';
-import Home from './Home';
-
-class Application extends Nullstack {
-
- render({count}) {
- return (
- <main>
- <Home route="/" />
- <div route="*"> Curinga </div>
- </main>
- )
- }
-
-}
-Curingas podem ser prefixados com um segmento.
---✨ Isso é especialmente útil para engines que podem ser montadas em suas aplicações.
-
import Nullstack from 'nullstack';
-import Home from './Home';
-import BlogEngine from './BlogEngine';
-
-class Application extends Nullstack {
-
- render({count}) {
- return (
- <main>
- <Home route="/" />
- <BlogEngine route="/blog/*" />
- </main>
- )
- }
-
-}
-Roteador
A chave router é um proxy de objeto injetado em cada instância de cliente.
O router tem duas chaves:
-
-
url
-path
-
A chave url retorna tudo depois do domínio, incluindo o caminho e os parâmetros de query como uma string.
A chave path retorna apenas o caminho sem os parâmetros de consulta.
--💡 Ambas as chaves acima automaticamente removem a barra final por conveniência.
-
Atribuir a url ou path causará redirecionamento.
import Nullstack from 'nullstack';
-
-class Application extends Nullstack {
-
- prepare({router}) {
- if(router.path == '/') {
- router.path = '/dashboard';
- }
- }
-
-}
---💡 Por baixo dos panos tags
-aeparamsusam orouter.
Eventos customizados
Atualizar router.url ou router.path irá gerar um evento personalizado.
import Nullstack from 'nullstack';
-
-class Analytics extends Nullstack {
-
- hydrate({router}) {
- window.addEventListener(router.event, () => {
- console.log(router.url);
- });
- }
-
-}
-
-export default Analytics;
-Âncoras especiais
Tags de âncora aceitam somente alguns atributos especiais convenientes além do href comum.
Você pode atribuir o atributo params com um objeto como valor.
O caminho permanecerá o mesmo do caminho atual do roteador, mas os params serão substituídos pelos novos parâmetros que você especificar.
<a params={{page: 1}}> Primeira Página </a>
-E você deseja apenas atualizar alguns parâmetros e manter outros, você pode usar o operador javascript spread para isso.
-<a params={{...params, page: 1}}> Primeira Página </a>
-Você pode definir o atributo path com uma string começando com "/" e sem parâmetros de query.
Os parâmetros permanecerão os mesmos, mas, o path será atualizado.
<a path="/category/suspense"> Livros de Suspense </a>
-Ambos os atributos acima podem ser utilizados ao mesmo tempo.
-<a path="/category/suspense" params={{...params, page: 1}}> Livros de Suspense </a>
-Rotas aninhadas
A primeira rota a ser correspondida será renderizada.
-Os outros elementos com uma rota não serão renderizados, no entanto, os elementos no mesmo nível sem um atributo route serão renderizados normalmente.
O roteador irá procurar uma rota por nível de profundidade DOM, isso permite que você tenha um comportamento de roteamento aninhado.
-import Nullstack from 'nullstack';
-import Home from './Home';
-
-class Application extends Nullstack {
-
- renderPage() {
- return (
- <section>
- <div route="/page/about"> About Page </div>
- <div route="/page/contact"> Contact Page </div>
- </section>
- )
- }
-
- render({count}) {
- return (
- <main>
- <Home route="/" />
- <Page route="/page/:slug" />
- </main>
- )
- }
-
-}
-
-export default Application;
-Próximo passo
⚔ Aprenda sobre vínculos bidirecionais.
-Rotas e Parâmetros
Nullstack tem rotas embutidas, não faria sentido não ser assim já que se espera que aplicações web tenham hyperlinks.
-Qualquer tag pode receber um atributo route, seja um componente, componente interno ou uma tag HTML simples.
import Nullstack from 'nullstack';
-import Page from './Page';
-
-class Application extends Nullstack {
-
- renderHome() {
- return (
- <section> Home </section>
- )
- }
-
- render({count}) {
- return (
- <main>
- <Home route="/" />
- <Page route="/page" />
- <abbr route="/abbreviations"> Abreviações </abbr>
- </main>
- )
- }
-
-}
-
-export default Application;
-Links
Links no Nullstack são tags a simples com o valor de href começando com "/".
<a href="/page/about"> Página About </a>
---💡 No lado do cliente o evento de clique modificará o histórico sem recarregar a página.
-
--✨ Você ainda pode atribuir seu próprio evento de clique para a tag sem perder o comportamento do framework.
-
Parâmetros
A chave params é um proxy de objeto injetado em cada instância de cliente.
Cada parâmetro da string de query é mapeado para esse objeto.
-Por padrão qualquer chave requisitada deste objeto retornará uma string.
-Se o valor for undefined retornará uma string vazia.
Se o valor for true ou false retornará um boleano, ao invés de uma string.
--🐱💻 Abaixo um exemplo que visita "/books?expanded=true&page=2":
-
import Nullstack from 'nullstack';
-
-class Books extends Nullstack {
-
- async initiate({params}) {
- if(params.expanded) {
- const page = parseInt(params.page) || 1;
- this.books = await this.getBooks({page});
- }
- }
-
-}
-
-export default Books;
-Realizar atribuição para uma chave de params causará um redirecionamento para a rota com os parâmetros atualizados.
Quando realizar atribuição para um parâmetro, o valor será convertido para JSON antes de ser definido.
---💡 Redirecionamentos funcionam em lotes, então não há perca de performance em multiplas atribuições.
-
import Nullstack from 'nullstack';
-
-class Paginator extends Nullstack {
-
- handleClick({params}) {
- params.filter = '';
- params.page = 1;
- }
-
-}
-
-export default Paginator;
-Atribuir uma string vazia a um parâmetro irá removê-lo da url.
-Segmentos Dinâmicos
Parte da rota pode ser uma expressão começada com ":" segida por um nome de parâmetro.
-Esse valor será comparado com qualquer string na mesma posição de diretório.
-O valor da string na URL será atribuído para o contexto, parâmetros e funções abaixo desse ponto na hierarquia terão acesso a nova chave.
---🐱💻 Abaixo um exemplo que visita "/category/suspense?page=2":
-
import Nullstack from 'nullstack';
-
-class Books extends Nullstack {
-
- async initiate({params}) {
- const page = parseInt(params.page) || 1;
- const category = params.slug;
- this.books = await this.getBooks({category, page});
- }
-
-}
-
-export default Books;
-import Nullstack from 'nullstack';
-import Books from './Books';
-
-class Application extends Nullstack {
-
- render() {
- <main>
- <Books route="/category/:slug">
- </main>
- }
-
-}
-
-export default Application;
-Quando um segmento dinâmico é alterado, como por exemplo mover de "/category/suspense" para "/category/comedy", o componente será desfeito e uma nova instância será criada.
-Mudar um parâmetro de consulta não re-instnaciará o componente.
-Os filhos do componente não serão re-instanciados automaticamente, você pode definir a mesma rota para os filhos ou fazer isso manualmente se desejar esse comportamento.
---💡 O comportamento mencionado acima resolve muitos dos problemas que você teria normalmente que lidar manualmente.
-
Curingas
Curingas são rotas declaradas com "*" como valor do atributo
-Essas rotas corresponderão a qualquer coisa se nada acima delas corresponder a URL requisitada.
-import Nullstack from 'nullstack';
-import Home from './Home';
-
-class Application extends Nullstack {
-
- render({count}) {
- return (
- <main>
- <Home route="/" />
- <div route="*"> Curinga </div>
- </main>
- )
- }
-
-}
-Curingas podem ser prefixados com um segmento.
---✨ Isso é especialmente útil para engines que podem ser montadas em suas aplicações.
-
import Nullstack from 'nullstack';
-import Home from './Home';
-import BlogEngine from './BlogEngine';
-
-class Application extends Nullstack {
-
- render({count}) {
- return (
- <main>
- <Home route="/" />
- <BlogEngine route="/blog/*" />
- </main>
- )
- }
-
-}
-Roteador
A chave router é um proxy de objeto injetado em cada instância de cliente.
O router tem duas chaves:
-
-
url
-path
-
A chave url retorna tudo depois do domínio, incluindo o caminho e os parâmetros de query como uma string.
A chave path retorna apenas o caminho sem os parâmetros de consulta.
--💡 Ambas as chaves acima automaticamente removem a barra final por conveniência.
-
Atribuir a url ou path causará redirecionamento.
import Nullstack from 'nullstack';
-
-class Application extends Nullstack {
-
- prepare({router}) {
- if(router.path == '/') {
- router.path = '/dashboard';
- }
- }
-
-}
---💡 Por baixo dos panos tags
-aeparamsusam orouter.
Eventos customizados
Atualizar router.url ou router.path irá gerar um evento personalizado.
import Nullstack from 'nullstack';
-
-class Analytics extends Nullstack {
-
- hydrate({router}) {
- window.addEventListener(router.event, () => {
- console.log(router.url);
- });
- }
-
-}
-
-export default Analytics;
-Âncoras especiais
Tags de âncora aceitam somente alguns atributos especiais convenientes além do href comum.
Você pode atribuir o atributo params com um objeto como valor.
O caminho permanecerá o mesmo do caminho atual do roteador, mas os params serão substituídos pelos novos parâmetros que você especificar.
<a params={{page: 1}}> Primeira Página </a>
-E você deseja apenas atualizar alguns parâmetros e manter outros, você pode usar o operador javascript spread para isso.
-<a params={{...params, page: 1}}> Primeira Página </a>
-Você pode definir o atributo path com uma string começando com "/" e sem parâmetros de query.
Os parâmetros permanecerão os mesmos, mas, o path será atualizado.
<a path="/category/suspense"> Livros de Suspense </a>
-Ambos os atributos acima podem ser utilizados ao mesmo tempo.
-<a path="/category/suspense" params={{...params, page: 1}}> Livros de Suspense </a>
-Rotas aninhadas
A primeira rota a ser correspondida será renderizada.
-Os outros elementos com uma rota não serão renderizados, no entanto, os elementos no mesmo nível sem um atributo route serão renderizados normalmente.
O roteador irá procurar uma rota por nível de profundidade DOM, isso permite que você tenha um comportamento de roteamento aninhado.
-import Nullstack from 'nullstack';
-import Home from './Home';
-
-class Application extends Nullstack {
-
- renderPage() {
- return (
- <section>
- <div route="/page/about"> About Page </div>
- <div route="/page/contact"> Contact Page </div>
- </section>
- )
- }
-
- render({count}) {
- return (
- <main>
- <Home route="/" />
- <Page route="/page/:slug" />
- </main>
- )
- }
-
-}
-
-export default Application;
-Próximo passo
⚔ Aprenda sobre vínculos bidirecionais.
-Nullstack tem rotas embutidas, não faria sentido não ser assim já que se espera que aplicações web tenham hyperlinks.
\nQualquer tag pode receber um atributo route, seja um componente, componente interno ou uma tag HTML simples.
import Nullstack from 'nullstack';\nimport Page from './Page';\n\nclass Application extends Nullstack {\n\n renderHome() {\n return (\n <section> Home </section>\n )\n }\n \n render({count}) {\n return (\n <main>\n <Home route=\"/\" />\n <Page route=\"/page\" />\n <abbr route=\"/abbreviations\"> Abreviações </abbr>\n </main>\n )\n }\n\n}\n\nexport default Application;\nLinks
Links no Nullstack são tags a simples com o valor de href começando com "/".
<a href=\"/page/about\"> Página About </a>\n\n\n💡 No lado do cliente o evento de clique modificará o histórico sem recarregar a página.
\n
\n\n✨ Você ainda pode atribuir seu próprio evento de clique para a tag sem perder o comportamento do framework.
\n
Parâmetros
A chave params é um proxy de objeto injetado em cada instância de cliente.
Cada parâmetro da string de query é mapeado para esse objeto.
\nPor padrão qualquer chave requisitada deste objeto retornará uma string.
\nSe o valor for undefined retornará uma string vazia.
Se o valor for true ou false retornará um boleano, ao invés de uma string.
\n\n🐱💻 Abaixo um exemplo que visita "/books?expanded=true&page=2":
\n
import Nullstack from 'nullstack';\n\nclass Books extends Nullstack {\n\n async initiate({params}) {\n if(params.expanded) {\n const page = parseInt(params.page) || 1;\n this.books = await this.getBooks({page});\n }\n }\n\n}\n\nexport default Books;\nRealizar atribuição para uma chave de params causará um redirecionamento para a rota com os parâmetros atualizados.
Quando realizar atribuição para um parâmetro, o valor será convertido para JSON antes de ser definido.
\n\n\n💡 Redirecionamentos funcionam em lotes, então não há perca de performance em multiplas atribuições.
\n
import Nullstack from 'nullstack';\n\nclass Paginator extends Nullstack {\n\n handleClick({params}) {\n params.filter = '';\n params.page = 1;\n }\n\n}\n\nexport default Paginator;\nAtribuir uma string vazia a um parâmetro irá removê-lo da url.
\nSegmentos Dinâmicos
Parte da rota pode ser uma expressão começada com ":" segida por um nome de parâmetro.
\nEsse valor será comparado com qualquer string na mesma posição de diretório.
\nO valor da string na URL será atribuído para o contexto, parâmetros e funções abaixo desse ponto na hierarquia terão acesso a nova chave.
\n\n\n🐱💻 Abaixo um exemplo que visita "/category/suspense?page=2":
\n
import Nullstack from 'nullstack';\n\nclass Books extends Nullstack {\n\n async initiate({params}) {\n const page = parseInt(params.page) || 1;\n const category = params.slug;\n this.books = await this.getBooks({category, page});\n }\n\n}\n\nexport default Books;\nimport Nullstack from 'nullstack';\nimport Books from './Books';\n\nclass Application extends Nullstack {\n\n render() {\n <main>\n <Books route=\"/category/:slug\">\n </main>\n }\n\n}\n\nexport default Application;\nQuando um segmento dinâmico é alterado, como por exemplo mover de "/category/suspense" para "/category/comedy", o componente será desfeito e uma nova instância será criada.
\nMudar um parâmetro de consulta não re-instnaciará o componente.
\nOs filhos do componente não serão re-instanciados automaticamente, você pode definir a mesma rota para os filhos ou fazer isso manualmente se desejar esse comportamento.
\n\n\n💡 O comportamento mencionado acima resolve muitos dos problemas que você teria normalmente que lidar manualmente.
\n
Curingas
Curingas são rotas declaradas com "*" como valor do atributo
\nEssas rotas corresponderão a qualquer coisa se nada acima delas corresponder a URL requisitada.
\nimport Nullstack from 'nullstack';\nimport Home from './Home';\n\nclass Application extends Nullstack {\n\n render({count}) {\n return (\n <main>\n <Home route=\"/\" />\n <div route=\"*\"> Curinga </div>\n </main>\n )\n }\n\n}\nCuringas podem ser prefixados com um segmento.
\n\n\n✨ Isso é especialmente útil para engines que podem ser montadas em suas aplicações.
\n
import Nullstack from 'nullstack';\nimport Home from './Home';\nimport BlogEngine from './BlogEngine';\n\nclass Application extends Nullstack {\n\n render({count}) {\n return (\n <main>\n <Home route=\"/\" />\n <BlogEngine route=\"/blog/*\" />\n </main>\n )\n }\n\n}\nRoteador
A chave router é um proxy de objeto injetado em cada instância de cliente.
O router tem duas chaves:
- \n
url\npath\n
A chave url retorna tudo depois do domínio, incluindo o caminho e os parâmetros de query como uma string.
A chave path retorna apenas o caminho sem os parâmetros de consulta.
\n\n💡 Ambas as chaves acima automaticamente removem a barra final por conveniência.
\n
Atribuir a url ou path causará redirecionamento.
import Nullstack from 'nullstack';\n\nclass Application extends Nullstack {\n\n prepare({router}) {\n if(router.path == '/') {\n router.path = '/dashboard';\n }\n }\n\n}\n\n\n💡 Por baixo dos panos tags
\naeparamsusam orouter.
Eventos customizados
Atualizar router.url ou router.path irá gerar um evento personalizado.
import Nullstack from 'nullstack';\n\nclass Analytics extends Nullstack {\n\n hydrate({router}) {\n window.addEventListener(router.event, () => {\n console.log(router.url);\n });\n }\n\n}\n\nexport default Analytics;\nÂncoras especiais
Tags de âncora aceitam somente alguns atributos especiais convenientes além do href comum.
Você pode atribuir o atributo params com um objeto como valor.
O caminho permanecerá o mesmo do caminho atual do roteador, mas os params serão substituídos pelos novos parâmetros que você especificar.
<a params={{page: 1}}> Primeira Página </a>\nE você deseja apenas atualizar alguns parâmetros e manter outros, você pode usar o operador javascript spread para isso.
\n<a params={{...params, page: 1}}> Primeira Página </a>\nVocê pode definir o atributo path com uma string começando com "/" e sem parâmetros de query.
Os parâmetros permanecerão os mesmos, mas, o path será atualizado.
<a path=\"/category/suspense\"> Livros de Suspense </a>\nAmbos os atributos acima podem ser utilizados ao mesmo tempo.
\n<a path=\"/category/suspense\" params={{...params, page: 1}}> Livros de Suspense </a>\nRotas aninhadas
A primeira rota a ser correspondida será renderizada.
\nOs outros elementos com uma rota não serão renderizados, no entanto, os elementos no mesmo nível sem um atributo route serão renderizados normalmente.
O roteador irá procurar uma rota por nível de profundidade DOM, isso permite que você tenha um comportamento de roteamento aninhado.
\nimport Nullstack from 'nullstack';\nimport Home from './Home';\n\nclass Application extends Nullstack {\n\n renderPage() {\n return (\n <section>\n <div route=\"/page/about\"> About Page </div>\n <div route=\"/page/contact\"> Contact Page </div>\n </section>\n )\n }\n \n render({count}) {\n return (\n <main>\n <Home route=\"/\" />\n <Page route=\"/page/:slug\" />\n </main>\n )\n }\n\n}\n\nexport default Application;\nPróximo passo
⚔ Aprenda sobre vínculos bidirecionais.
\n","description":"Nullstack tem rotas embutidas, não faria sentido não ser assim já que se espera que aplicações web tenham hyperlinks."},"n-0-0-13":{},"n-0-0-15":{},"n-0-0-16":{"locale":"pt-BR","i18n":{"nullachan":{"alt":"Nulla-Chan","title":"Nulla-Chan: Waifu oficial do Nullstack"},"links":[{"title":"YouTube","href":"https://www.youtube.com/channel/UCUNPaxoppH3lu6JTrUX78Ww"},{"title":"Twitter","href":"https://twitter.com/nullstackapp"},{"title":"GitHub","href":"https://github.com/nullstack"}]}}}, "page": {"image":"/image-1200x630.png","status":200,"title":"Rotas e Parâmetros - Nullstack","description":"Nullstack tem rotas embutidas, não faria sentido não ser assim já que se espera que aplicações web tenham hyperlinks."}} \ No newline at end of file diff --git a/docs/pt-br/service-worker.html b/docs/pt-br/service-worker.html deleted file mode 100644 index bb009504..00000000 --- a/docs/pt-br/service-worker.html +++ /dev/null @@ -1,292 +0,0 @@ - - - - - -Contexto Service Worker
-
-
- Tipo:
object
- - Origem: Contexto Nullstack -
- Disponibilidade: server/client -
- readwrite no contexto do server -
- readonly no contexto do client -
Ele te dá controle granular do comportamento do seu PWA.
-Chaves do worker serão usadas para gerar o arquivo do service worker e devem ser setadas durante o processo de inicialização.
Chaves do worker são congeladas após o processo de inicialização.
As seguintes keys estão disponíveis no objeto durante a inicialização:
--
-
- enabled:
boolean
- - preload:
string array(relative paths)
- - headers:
object
-
A chave enabled define se o service worker será registrado automaticamente pelo Nullstack.
Por padrão a chave enabled é setada como true no modo de produção e false no modo de desenvolvimento.
O array preload é composto por caminhos que serão cacheados quando o service worker for instalado.
Os assets requeridos para inicializar a aplicação serão pré-carregados automaticamente, e você deverá apenas as páginas extras que você quer que estejam disponíveis em modo offline.
-import Nullstack from 'nullstack';
-import path from 'path';
-import {readdirSync} from 'fs';
-
-class Application extends Nullstack {
-
- static async start({worker}) {
- const articles = readdirSync(path.join(__dirname, '..', 'articles'));
- worker.preload = [
- ...articles.map((article) => '/' + article.replace('.md', '')),
- '/nullstack.svg',
- '/documentation',
- '/components'
- ]
- }
-
- // ...
-
-}
-
-export default Application;
---💡 O exemplo acima foi extraido deste repositório e permite que a documentação esteja totalmente acessível em modo offline.
-
As seguintes chaves estão disponíveis como readonly no contexto do cliente:
--
-
- enabled:
boolean
- - preload:
string array(relative paths)
- - online:
boolean
- - fetching:
boolean
- - responsive:
boolean
- - installation:
BeforeInstallPromptEvent
- - registration:
ServiceWorkerRegistration
- - loading:
object
-
As seguintes chaves estão disponíveis como readwrite no contexto do cliente:
--
-
- headers:
object
-
A chave responsive determina se a aplicação tem todas as respostas necessárias para renderizar a página atual.
O Nullstack irá tentar manter sua aplicação respondendo o maior tempo possível e setará a chave para false somente quando não houver mais alternativas de recuperar qualquer resposta da rede ou offline usando a estratégia de busca para o ambiente.
A chave online irá monitorar os eventos da rede e re-renderizar a aplicação quando o valor de navigator.onLine mudar.
Quando a aplicação voltar a ficar online o Nullstack irá tentar fazer a aplicação responder novamente e re-renderizar se necessário.
-import Nullstack from 'nullstack';
-// ...
-
-class Application extends Nullstack {
-
- // ...
-
- render({worker}) {
- if(!worker.responsive) {
- return <OfflineWarning />
- }
- return (
- <main>
- <Home route="/" />
- </main>
- )
- }
-
-}
-Você pode acessar a registration e installation do service worker atual pela chave worker para controlar o fluxo do seu PWA.
A chave registration se refere ao registro do service worker e só estará disponível uma vez que o processo de registro esteja completo.
A chave installation se refere a instalação delegada no evento do prompt e apenas estará disponível se o evento beforeinstallprompt ocorrer.
import Nullstack from 'nullstack';
-
-class PWAInstaller extends Nullstack {
-
- installed = false;
- hidden = false;
-
- async prompt({worker}) {
- try {
- worker.installation.prompt();
- const {outcome} = await worker.installation.userChoice;
- if (outcome === 'accepted') {
- console.log('User accepted the A2HS prompt');
- } else {
- console.log('User dismissed the A2HS prompt');
- }
- } finally {
- this.hidden = true;
- }
- }
-
- render({worker, project}) {
- if(this.hidden) return false;
- if(!worker.installation) return false;
- return (
- <div>
- <img src={project.favicon} />
- <p> Do you want to add {project.name} to your home screen?</p>
- <button onclick={this.prompt}> Install </button>
- <button onclick={{hidden: true}}> Not Now </button>
- </div>
- )
- }
-
-}
-
-export default PWAInstaller;
-Carregando telas
Quando uma função do servidor é chamada o fetching será setado como true até a requisição ser resolvida.
Quando uma função do servidor é chamada a chave com o nome da função do servidor invocada será setada como true na chave loading até a requisição ser resolvida.
Qualquer chave que for chamada no objeto loading sempre irá retornar um valor booleano ao invés de undefined por consistência.
Quando o servidor estiver emulando o contexto do cliente para renderização no lado do servidor, todas as chaves de loading vão sempre retornar false, pulando multiplos ciclos de render por performance.
import Nullstack from 'nullstack';
-
-class Page extends Nullstack {
-
- static async save() {
- // ...
- }
-
- async submit() {
- await this.save();
- }
-
- render({worker}) {
- return (
- <form onsubmit={this.save}>
- {worker.fetching &&
- <span> loading... </span>
- }
- <button disabled={worker.loading.save}>
- Save
- </button>
- </form>
- )
- }
-
-}
-
-export default Page;
-Headers customizadas
Você pode usar a chave headers para configurar as headers que o worker usará na requisição para uma função do servidor
--🔥 headers serão ignorados quando uma função do servidor for chamada durante o processo de renderização do lado do servidor
-
import Nullstack from 'nullstack';
-
-class LoginPage extends Nullstack {
-
- // ...
-
- async submit({worker}) {
- // ...
- this.headers['Authorization'] = `Bearer ${token}`;
- // ...
- }
-
- static async authorize({request}) {
- const authorization = request.headers['Authorization'];
- // ...
- }
-
- // ...
-
-}
-
-
-export default LoginPage;
---✨ Aprenda mais sobre o requisições e respostas do servidor
-
Estratégia de renderização Server-side
-
-
- Requisições de diferentes origens serão realizadas normalmente; -
- Requisições diferentes do método GET serão realizadas normalmente; -
- Assets com Fingerprints serão carregados no cache no momento da instalação; -
- Assets com Fingerprints serão carregados do cache primeiro, e só então retornados para a rede, se necessário; -
- Caminhos com uma extensão serão recuperados e atualizarão o cache em segundo plano para uma requisição subsequente; -
- Os caminhos navegados serão carregados da rede e se falhar serão retornados do cache para a página na qual o
worker.responsivee oworker.onlineestiverem setados comofalse;
-
Estratégia de geração de site estático
-
-
- Requisições de diferentes origens serão realizadas normalmente; -
- Requisições diferentes do método GET serão realizadas normalmente; -
- Assets com Fingerprints serão carregados no cache no momento da instalação; -
- Assets com Fingerprints serão carregados do cache primeiro, e só então retornados para a rede, se necessário; -
- Caminhos com uma extensão serão recuperaados e atualizarão o cache em segundo plano para uma requisição subsequente; -
- A página inicial será carregada na rede primeiro, e se necessário será retornada uma cópia em cache; -
- Caminhos navegados irão carregar apenas os dados da API estática e mesclar com o template da aplicação para gerar a resposta. -
- Navegar para uma rota estática irá fazer cache apenas dos dados daquela página; -
- Quando os dados estiverem indisponíveis no cache ou na rede irá retornar uma página na qual
worker.responsiveeworker.onlineestiverem setados comofalse;
-
Estratégia customizada
O Nullstack irá instalar automaticamente seu service worker se enabled estiver setado como true com os seguintes eventos:
-
-
install
-activate
-fetch
-
Você pode sobreescrever qualquer um desses eventos criando um service-worker.js na pasta public;
-Se qualquer uma das palavras chaves acima for encontrada o Nullstack injetará sua função no código do service worker ao invés do padrão.
-Por conveniência uma chave chamada context é injetada no self do service worker com as seguintes chaves:
-
-
worker
-project
-environment
-
function activate(event) {
- event.waitUntil(async function() {
- const cacheNames = await caches.keys();
- const cachesToDelete = cacheNames.filter(cacheName => cacheName !== self.context.environment.key);
- await Promise.all(cachesToDelete.map((cacheName) => caches.delete(cacheName)));
- if (self.registration.navigationPreload) {
- await self.registration.navigationPreload.enable();
- }
- self.clients.claim();
- }());
-}
-
-self.addEventListener('activate', activate);
---💡 O exemplo acima foi extraido do service worker gerado e usa
-self.context.enviroment.key
Próximo passo
-Contexto Service Worker
-
-
- Tipo:
object
- - Origem: Contexto Nullstack -
- Disponibilidade: server/client -
- readwrite no contexto do server -
- readonly no contexto do client -
Ele te dá controle granular do comportamento do seu PWA.
-Chaves do worker serão usadas para gerar o arquivo do service worker e devem ser setadas durante o processo de inicialização.
Chaves do worker são congeladas após o processo de inicialização.
As seguintes keys estão disponíveis no objeto durante a inicialização:
--
-
- enabled:
boolean
- - preload:
string array(relative paths)
- - headers:
object
-
A chave enabled define se o service worker será registrado automaticamente pelo Nullstack.
Por padrão a chave enabled é setada como true no modo de produção e false no modo de desenvolvimento.
O array preload é composto por caminhos que serão cacheados quando o service worker for instalado.
Os assets requeridos para inicializar a aplicação serão pré-carregados automaticamente, e você deverá apenas as páginas extras que você quer que estejam disponíveis em modo offline.
-import Nullstack from 'nullstack';
-import path from 'path';
-import {readdirSync} from 'fs';
-
-class Application extends Nullstack {
-
- static async start({worker}) {
- const articles = readdirSync(path.join(__dirname, '..', 'articles'));
- worker.preload = [
- ...articles.map((article) => '/' + article.replace('.md', '')),
- '/nullstack.svg',
- '/documentation',
- '/components'
- ]
- }
-
- // ...
-
-}
-
-export default Application;
---💡 O exemplo acima foi extraido deste repositório e permite que a documentação esteja totalmente acessível em modo offline.
-
As seguintes chaves estão disponíveis como readonly no contexto do cliente:
--
-
- enabled:
boolean
- - preload:
string array(relative paths)
- - online:
boolean
- - fetching:
boolean
- - responsive:
boolean
- - installation:
BeforeInstallPromptEvent
- - registration:
ServiceWorkerRegistration
- - loading:
object
-
As seguintes chaves estão disponíveis como readwrite no contexto do cliente:
--
-
- headers:
object
-
A chave responsive determina se a aplicação tem todas as respostas necessárias para renderizar a página atual.
O Nullstack irá tentar manter sua aplicação respondendo o maior tempo possível e setará a chave para false somente quando não houver mais alternativas de recuperar qualquer resposta da rede ou offline usando a estratégia de busca para o ambiente.
A chave online irá monitorar os eventos da rede e re-renderizar a aplicação quando o valor de navigator.onLine mudar.
Quando a aplicação voltar a ficar online o Nullstack irá tentar fazer a aplicação responder novamente e re-renderizar se necessário.
-import Nullstack from 'nullstack';
-// ...
-
-class Application extends Nullstack {
-
- // ...
-
- render({worker}) {
- if(!worker.responsive) {
- return <OfflineWarning />
- }
- return (
- <main>
- <Home route="/" />
- </main>
- )
- }
-
-}
-Você pode acessar a registration e installation do service worker atual pela chave worker para controlar o fluxo do seu PWA.
A chave registration se refere ao registro do service worker e só estará disponível uma vez que o processo de registro esteja completo.
A chave installation se refere a instalação delegada no evento do prompt e apenas estará disponível se o evento beforeinstallprompt ocorrer.
import Nullstack from 'nullstack';
-
-class PWAInstaller extends Nullstack {
-
- installed = false;
- hidden = false;
-
- async prompt({worker}) {
- try {
- worker.installation.prompt();
- const {outcome} = await worker.installation.userChoice;
- if (outcome === 'accepted') {
- console.log('User accepted the A2HS prompt');
- } else {
- console.log('User dismissed the A2HS prompt');
- }
- } finally {
- this.hidden = true;
- }
- }
-
- render({worker, project}) {
- if(this.hidden) return false;
- if(!worker.installation) return false;
- return (
- <div>
- <img src={project.favicon} />
- <p> Do you want to add {project.name} to your home screen?</p>
- <button onclick={this.prompt}> Install </button>
- <button onclick={{hidden: true}}> Not Now </button>
- </div>
- )
- }
-
-}
-
-export default PWAInstaller;
-Carregando telas
Quando uma função do servidor é chamada o fetching será setado como true até a requisição ser resolvida.
Quando uma função do servidor é chamada a chave com o nome da função do servidor invocada será setada como true na chave loading até a requisição ser resolvida.
Qualquer chave que for chamada no objeto loading sempre irá retornar um valor booleano ao invés de undefined por consistência.
Quando o servidor estiver emulando o contexto do cliente para renderização no lado do servidor, todas as chaves de loading vão sempre retornar false, pulando multiplos ciclos de render por performance.
import Nullstack from 'nullstack';
-
-class Page extends Nullstack {
-
- static async save() {
- // ...
- }
-
- async submit() {
- await this.save();
- }
-
- render({worker}) {
- return (
- <form onsubmit={this.save}>
- {worker.fetching &&
- <span> loading... </span>
- }
- <button disabled={worker.loading.save}>
- Save
- </button>
- </form>
- )
- }
-
-}
-
-export default Page;
-Headers customizadas
Você pode usar a chave headers para configurar as headers que o worker usará na requisição para uma função do servidor
--🔥 headers serão ignorados quando uma função do servidor for chamada durante o processo de renderização do lado do servidor
-
import Nullstack from 'nullstack';
-
-class LoginPage extends Nullstack {
-
- // ...
-
- async submit({worker}) {
- // ...
- this.headers['Authorization'] = `Bearer ${token}`;
- // ...
- }
-
- static async authorize({request}) {
- const authorization = request.headers['Authorization'];
- // ...
- }
-
- // ...
-
-}
-
-
-export default LoginPage;
---✨ Aprenda mais sobre o requisições e respostas do servidor
-
Estratégia de renderização Server-side
-
-
- Requisições de diferentes origens serão realizadas normalmente; -
- Requisições diferentes do método GET serão realizadas normalmente; -
- Assets com Fingerprints serão carregados no cache no momento da instalação; -
- Assets com Fingerprints serão carregados do cache primeiro, e só então retornados para a rede, se necessário; -
- Caminhos com uma extensão serão recuperados e atualizarão o cache em segundo plano para uma requisição subsequente; -
- Os caminhos navegados serão carregados da rede e se falhar serão retornados do cache para a página na qual o
worker.responsivee oworker.onlineestiverem setados comofalse;
-
Estratégia de geração de site estático
-
-
- Requisições de diferentes origens serão realizadas normalmente; -
- Requisições diferentes do método GET serão realizadas normalmente; -
- Assets com Fingerprints serão carregados no cache no momento da instalação; -
- Assets com Fingerprints serão carregados do cache primeiro, e só então retornados para a rede, se necessário; -
- Caminhos com uma extensão serão recuperaados e atualizarão o cache em segundo plano para uma requisição subsequente; -
- A página inicial será carregada na rede primeiro, e se necessário será retornada uma cópia em cache; -
- Caminhos navegados irão carregar apenas os dados da API estática e mesclar com o template da aplicação para gerar a resposta. -
- Navegar para uma rota estática irá fazer cache apenas dos dados daquela página; -
- Quando os dados estiverem indisponíveis no cache ou na rede irá retornar uma página na qual
worker.responsiveeworker.onlineestiverem setados comofalse;
-
Estratégia customizada
O Nullstack irá instalar automaticamente seu service worker se enabled estiver setado como true com os seguintes eventos:
-
-
install
-activate
-fetch
-
Você pode sobreescrever qualquer um desses eventos criando um service-worker.js na pasta public;
-Se qualquer uma das palavras chaves acima for encontrada o Nullstack injetará sua função no código do service worker ao invés do padrão.
-Por conveniência uma chave chamada context é injetada no self do service worker com as seguintes chaves:
-
-
worker
-project
-environment
-
function activate(event) {
- event.waitUntil(async function() {
- const cacheNames = await caches.keys();
- const cachesToDelete = cacheNames.filter(cacheName => cacheName !== self.context.environment.key);
- await Promise.all(cachesToDelete.map((cacheName) => caches.delete(cacheName)));
- if (self.registration.navigationPreload) {
- await self.registration.navigationPreload.enable();
- }
- self.clients.claim();
- }());
-}
-
-self.addEventListener('activate', activate);
---💡 O exemplo acima foi extraido do service worker gerado e usa
-self.context.enviroment.key
Próximo passo
-- \n
- Tipo:
object\n - Origem: Contexto Nullstack \n
- Disponibilidade: server/client \n
- readwrite no contexto do server \n
- readonly no contexto do client \n
Ele te dá controle granular do comportamento do seu PWA.
\nChaves do worker serão usadas para gerar o arquivo do service worker e devem ser setadas durante o processo de inicialização.
Chaves do worker são congeladas após o processo de inicialização.
As seguintes keys estão disponíveis no objeto durante a inicialização:
\n- \n
- enabled:
boolean\n - preload:
string array(relative paths) \n - headers:
object\n
A chave enabled define se o service worker será registrado automaticamente pelo Nullstack.
Por padrão a chave enabled é setada como true no modo de produção e false no modo de desenvolvimento.
O array preload é composto por caminhos que serão cacheados quando o service worker for instalado.
Os assets requeridos para inicializar a aplicação serão pré-carregados automaticamente, e você deverá apenas as páginas extras que você quer que estejam disponíveis em modo offline.
\nimport Nullstack from 'nullstack';\nimport path from 'path';\nimport {readdirSync} from 'fs';\n\nclass Application extends Nullstack {\n\n static async start({worker}) {\n const articles = readdirSync(path.join(__dirname, '..', 'articles'));\n worker.preload = [\n ...articles.map((article) => '/' + article.replace('.md', '')),\n '/nullstack.svg',\n '/documentation',\n '/components'\n ]\n }\n \n // ...\n\n}\n\nexport default Application;\n\n\n💡 O exemplo acima foi extraido deste repositório e permite que a documentação esteja totalmente acessível em modo offline.
\n
As seguintes chaves estão disponíveis como readonly no contexto do cliente:
\n- \n
- enabled:
boolean\n - preload:
string array(relative paths) \n - online:
boolean\n - fetching:
boolean\n - responsive:
boolean\n - installation:
BeforeInstallPromptEvent\n - registration:
ServiceWorkerRegistration\n - loading:
object\n
As seguintes chaves estão disponíveis como readwrite no contexto do cliente:
\n- \n
- headers:
object\n
A chave responsive determina se a aplicação tem todas as respostas necessárias para renderizar a página atual.
O Nullstack irá tentar manter sua aplicação respondendo o maior tempo possível e setará a chave para false somente quando não houver mais alternativas de recuperar qualquer resposta da rede ou offline usando a estratégia de busca para o ambiente.
A chave online irá monitorar os eventos da rede e re-renderizar a aplicação quando o valor de navigator.onLine mudar.
Quando a aplicação voltar a ficar online o Nullstack irá tentar fazer a aplicação responder novamente e re-renderizar se necessário.
\nimport Nullstack from 'nullstack';\n// ...\n\nclass Application extends Nullstack {\n \n // ...\n\n render({worker}) {\n if(!worker.responsive) {\n return <OfflineWarning />\n }\n return (\n <main>\n <Home route=\"/\" />\n </main>\n )\n }\n\n}\nVocê pode acessar a registration e installation do service worker atual pela chave worker para controlar o fluxo do seu PWA.
A chave registration se refere ao registro do service worker e só estará disponível uma vez que o processo de registro esteja completo.
A chave installation se refere a instalação delegada no evento do prompt e apenas estará disponível se o evento beforeinstallprompt ocorrer.
import Nullstack from 'nullstack';\n\nclass PWAInstaller extends Nullstack {\n\n installed = false;\n hidden = false;\n\n async prompt({worker}) {\n try {\n worker.installation.prompt();\n const {outcome} = await worker.installation.userChoice;\n if (outcome === 'accepted') {\n console.log('User accepted the A2HS prompt');\n } else {\n console.log('User dismissed the A2HS prompt');\n }\n } finally {\n this.hidden = true;\n }\n }\n \n render({worker, project}) {\n if(this.hidden) return false;\n if(!worker.installation) return false;\n return (\n <div>\n <img src={project.favicon} />\n <p> Do you want to add {project.name} to your home screen?</p>\n <button onclick={this.prompt}> Install </button>\n <button onclick={{hidden: true}}> Not Now </button>\n </div>\n )\n }\n\n}\n\nexport default PWAInstaller;\nCarregando telas
Quando uma função do servidor é chamada o fetching será setado como true até a requisição ser resolvida.
Quando uma função do servidor é chamada a chave com o nome da função do servidor invocada será setada como true na chave loading até a requisição ser resolvida.
Qualquer chave que for chamada no objeto loading sempre irá retornar um valor booleano ao invés de undefined por consistência.
Quando o servidor estiver emulando o contexto do cliente para renderização no lado do servidor, todas as chaves de loading vão sempre retornar false, pulando multiplos ciclos de render por performance.
import Nullstack from 'nullstack';\n\nclass Page extends Nullstack {\n\n static async save() {\n // ...\n }\n\n async submit() {\n await this.save();\n }\n \n render({worker}) {\n return (\n <form onsubmit={this.save}> \n {worker.fetching && \n <span> loading... </span>\n }\n <button disabled={worker.loading.save}> \n Save\n </button>\n </form>\n )\n }\n\n}\n\nexport default Page;\nHeaders customizadas
Você pode usar a chave headers para configurar as headers que o worker usará na requisição para uma função do servidor
\n\n🔥 headers serão ignorados quando uma função do servidor for chamada durante o processo de renderização do lado do servidor
\n
import Nullstack from 'nullstack';\n\nclass LoginPage extends Nullstack {\n\n // ...\n\n async submit({worker}) {\n // ...\n this.headers['Authorization'] = `Bearer ${token}`;\n // ...\n }\n\n static async authorize({request}) {\n const authorization = request.headers['Authorization'];\n // ...\n }\n \n // ...\n\n}\n\n\nexport default LoginPage;\n\n\n✨ Aprenda mais sobre o requisições e respostas do servidor
\n
Estratégia de renderização Server-side
- \n
- Requisições de diferentes origens serão realizadas normalmente; \n
- Requisições diferentes do método GET serão realizadas normalmente; \n
- Assets com Fingerprints serão carregados no cache no momento da instalação; \n
- Assets com Fingerprints serão carregados do cache primeiro, e só então retornados para a rede, se necessário; \n
- Caminhos com uma extensão serão recuperados e atualizarão o cache em segundo plano para uma requisição subsequente; \n
- Os caminhos navegados serão carregados da rede e se falhar serão retornados do cache para a página na qual o
worker.responsivee oworker.onlineestiverem setados comofalse; \n
Estratégia de geração de site estático
- \n
- Requisições de diferentes origens serão realizadas normalmente; \n
- Requisições diferentes do método GET serão realizadas normalmente; \n
- Assets com Fingerprints serão carregados no cache no momento da instalação; \n
- Assets com Fingerprints serão carregados do cache primeiro, e só então retornados para a rede, se necessário; \n
- Caminhos com uma extensão serão recuperaados e atualizarão o cache em segundo plano para uma requisição subsequente; \n
- A página inicial será carregada na rede primeiro, e se necessário será retornada uma cópia em cache; \n
- Caminhos navegados irão carregar apenas os dados da API estática e mesclar com o template da aplicação para gerar a resposta. \n
- Navegar para uma rota estática irá fazer cache apenas dos dados daquela página; \n
- Quando os dados estiverem indisponíveis no cache ou na rede irá retornar uma página na qual
worker.responsiveeworker.onlineestiverem setados comofalse; \n
Estratégia customizada
O Nullstack irá instalar automaticamente seu service worker se enabled estiver setado como true com os seguintes eventos:
- \n
install\nactivate\nfetch\n
Você pode sobreescrever qualquer um desses eventos criando um service-worker.js na pasta public;
\nSe qualquer uma das palavras chaves acima for encontrada o Nullstack injetará sua função no código do service worker ao invés do padrão.
\nPor conveniência uma chave chamada context é injetada no self do service worker com as seguintes chaves:
- \n
worker\nproject\nenvironment\n
function activate(event) {\n event.waitUntil(async function() {\n const cacheNames = await caches.keys();\n const cachesToDelete = cacheNames.filter(cacheName => cacheName !== self.context.environment.key);\n await Promise.all(cachesToDelete.map((cacheName) => caches.delete(cacheName)));\n if (self.registration.navigationPreload) {\n await self.registration.navigationPreload.enable();\n }\n self.clients.claim();\n }());\n}\n\nself.addEventListener('activate', activate);\n\n\n💡 O exemplo acima foi extraido do service worker gerado e usa
\nself.context.enviroment.key
Próximo passo
⚔ Aprenda Como fazer o deploy de uma aplicação Nullstack.
\n","description":"O objeto worker é um proxy no Contexto Nullstack disponível em ambos client e server e te dá controle granular do comportamento do seu PWA"},"n-0-0-13":{},"n-0-0-15":{},"n-0-0-16":{"locale":"pt-BR","i18n":{"nullachan":{"alt":"Nulla-Chan","title":"Nulla-Chan: Waifu oficial do Nullstack"},"links":[{"title":"YouTube","href":"https://www.youtube.com/channel/UCUNPaxoppH3lu6JTrUX78Ww"},{"title":"Twitter","href":"https://twitter.com/nullstackapp"},{"title":"GitHub","href":"https://github.com/nullstack"}]}}}, "page": {"image":"/image-1200x630.png","status":200,"title":"Contexto Service Worker - Nullstack","description":"O objeto worker é um proxy no Contexto Nullstack disponível em ambos client e server e te dá controle granular do comportamento do seu PWA"}} \ No newline at end of file diff --git a/docs/pt-br/sobre.html b/docs/pt-br/sobre.html deleted file mode 100644 index 42cdae49..00000000 --- a/docs/pt-br/sobre.html +++ /dev/null @@ -1,95 +0,0 @@ - - - - - -Por quê criamos o Nullstack?
Ele foi criado tendo em mente os programadores acostumados a desenvolver sistemas inteiros sozinhos, mas é facilmente escalável para equipes pequenas ou mesmo grandes, desde que cada programador conheça o fluxo do recurso que deve desenvolver.
-A Stack
Com a maioria das tecnologias usadas na web hoje em dia, o fluxo mais comum é algo assim:
--
-
- Front-end usa um redutor sobre um contexto que chama um fetcher; -
- Este fetcher traz informações genéricas sobre uma API RESTful; -
- A API RESTful chama uma rota do servidor, que em seguida chama um controlador, que leva a informação de um modelo e o transforma em um serializer; -
- Se você precisar de mais de um recurso, este processo deve ser repetido até que todos os recursos sejam buscados; -
- Depois que todos os dados forem buscados, só então o front-end poderá usá-los; -
- Raciocinar sobre como lidar como o servidor processará e realizará as etapas acima; -
Note que tudo que você queria era mostrar algo a partir do banco de dados em uma visualização. Com o Nullstack, você só precisa se preocupar com a lógica. Todo o resto é Glue Code e o framework deve cuidar disso para você.
-Feature-driven
Se você está acostumado a trabalhar em mais de um projeto ao mesmo tempo ou mesmo se por acaso tiver que dar manutenção esporádica em muitos de seus projetos antigos, você pode ter tropeçado neste cenário: você não se lembra exatamente onde em seu código está a lógica que você está tentando consertar ou melhorar.
-Você pode ter um gancho cujas dependências são variáveis locais inicializadas com um estado redux, que foi armazenado em algum ponto por uma ação declarada em algum lugar em seu código fonte e chamada sabe-se lá onde.
-Se tudo o que pertence a um único recurso estivesse no mesmo arquivo, talvez você não precisasse fazer engenharia reversa em seu próprio código toda vez que precisar atualizar ou corrigir algo.
-Colocar tudo em um único arquivo pode parecer confuso à primeira vista, mas lembre-se de que você é quem decide a granularidade dessa divisão.
-Um "recurso" pode ser um formulário de registro inteiro ou algo tão pequeno quanto um botão que faz algumas verificações antes de permitir que você envie esse formulário. Depende inteiramente de você e, como cada componente é tão completo quanto um recurso inteiro, você pode chamar esse botão ou até mesmo o formulário inteiro em outras páginas de seu aplicativo. Isso nos leva à Verdadeira componentização e reutilização de código.
-Componentização e reutilização de código
Os componentes do Nullstack são autossuficientes.
-A maioria dos frameworks são especializados em apenas uma camada do desenvolvimento. Ao exportar um componente Nullstack, todo o código necessário para rodar o recurso vai ficar junto, sem a necessidade de alocar as outras camadas separadamente.
-Como efeito colateral, aplicativos inteiros podem ser usados como componentes e montados em outros aplicativos como engines.
-Por quê usar Orientação à objetos e não componentes funcionais
À primeira vista, as classes podem parecer mais detalhadas do que os componentes funcionais. -Esta seção explicará os motivos que nos levam a favorecer as classes no desenvolvimento do Nullstack.
-As razões estão, na verdade, conectadas a alguns princípios básicos do Nullstack, sendo:
-Tudo é possivel
Nós não queremos introduzir um “modo Nullstack” de fazer as coisas, queremos que se torne algo acessível a qualquer pessoa com algum conhecimento Javascript.
-Dito isso, o primeiro grande problema foi abordar o gerenciamento de estado de uma forma Javascript padrão. O suporte de componentes funcionais exigiria uma solução semelhante aos ganchos de React.js, que seriam considerados um maneirismo do framework.
-Uma vez que optamos pela imutabilidade como uma restrição do framework, podemos usar a forma nativa de definir variáveis simples. Isto remove a complexidade do gerenciamento de estados, o que foi responsável anteriormente pela necessidade de usar uma biblioteca de terceiros para o gerenciamento dos mesmos
-Nenhum Glue Code ou “baterias incluídas”
O Nullstack pega emprestado o conceito de “bateria incluída” do Ember.js, mas permite que você troque as baterias. Tudo que você precisa para fazer um aplicativo deve fazer parte do framework e ainda ser flexível.
-O framework deve fazer o trabalho pesado e o programador deveria focar na sua própria aplicação. -Por esse motivo tudo que você precisa fazer é declarar suas classes e deixar que o Nullstack instancie elas para você. -Desta forma, nos removemos o aspecto mais doloroso de lidar com classes enquanto mantemos todas as vantagens delas.
-Rota de fuga segura
Orientado a objetos vs. funcional não é um tópico novo e, ultimamente, o primeiro parece ter sido excluído da maioria dos frameworks, não deixando lugar para desenvolvedores que gostam desse padrão.
-É certo que as classes demoraram muito para serem padronizadas em Javascript e o atraso pode ter causado algumas implementações traumáticas ao longo do caminho.
-Embora a programação orientada a objetos possa não ser a melhor solução para todos os problemas, o Nullstack permite que você importe funções livremente e as use nos momentos em que você achar melhor.
-Por que injeção de dependência em vez de modularidade
O contexto do Nullstack usa o padrão de injeção de dependência, o que significa que tudo o que você precisa pode ser solicitado do framework a partir da camada em que está a função.
-O contexto é um objeto com escopo horizontal que é injetado em todas as suas chamadas de função. A natureza não hierárquica desse padrão permite que você mova facilmente a lógica de seu componente conforme seu aplicativo cresce, enquanto ainda evita problemas com threading ou encher seu código-fonte com inúmeras declarações para a mesma coisa.
-Isso tem duas vantagens principais:
--
-
Você vê as dependências de seu código em uma função, em vez de tê-los todos importados na parte superior do arquivo.
-O framework é capaz de lhe dar informações mais precisas sobre o ambiente específico para essa chamada de função.
-
Felicidade do desenvolvedor
A aplicação gerada é suficiente para ser um PWA (Progressive Web App) sem pensar em boilerplates, e ainda mais, você é livre para substituir o comportamento padrão das funções.
-Um conceito emprestado do Ruby é a “felicidade do desenvolvedor”. O objetivo do Nullstack é facilitar a vida do desenvolvedor, simplificando tudo o que for possível sem esconder nada de você.
-Os primeiros desenvolvedores que queríamos deixar felizes somos nós mesmos. Fizemos o Nullstack porque nos divertimos no processo. Tudo começou como um protótipo simples em cima do React.js e nos empolgamos, tornando-o cada vez mais agradável para nós até que se tornou algo próprio.
-Esperamos que você goste de usar o Nullstack tanto quanto nós, porque é isso que mantém este projeto avançando.
-Por quê criamos o Nullstack?
Ele foi criado tendo em mente os programadores acostumados a desenvolver sistemas inteiros sozinhos, mas é facilmente escalável para equipes pequenas ou mesmo grandes, desde que cada programador conheça o fluxo do recurso que deve desenvolver.
-A Stack
Com a maioria das tecnologias usadas na web hoje em dia, o fluxo mais comum é algo assim:
--
-
- Front-end usa um redutor sobre um contexto que chama um fetcher; -
- Este fetcher traz informações genéricas sobre uma API RESTful; -
- A API RESTful chama uma rota do servidor, que em seguida chama um controlador, que leva a informação de um modelo e o transforma em um serializer; -
- Se você precisar de mais de um recurso, este processo deve ser repetido até que todos os recursos sejam buscados; -
- Depois que todos os dados forem buscados, só então o front-end poderá usá-los; -
- Raciocinar sobre como lidar como o servidor processará e realizará as etapas acima; -
Note que tudo que você queria era mostrar algo a partir do banco de dados em uma visualização. Com o Nullstack, você só precisa se preocupar com a lógica. Todo o resto é Glue Code e o framework deve cuidar disso para você.
-Feature-driven
Se você está acostumado a trabalhar em mais de um projeto ao mesmo tempo ou mesmo se por acaso tiver que dar manutenção esporádica em muitos de seus projetos antigos, você pode ter tropeçado neste cenário: você não se lembra exatamente onde em seu código está a lógica que você está tentando consertar ou melhorar.
-Você pode ter um gancho cujas dependências são variáveis locais inicializadas com um estado redux, que foi armazenado em algum ponto por uma ação declarada em algum lugar em seu código fonte e chamada sabe-se lá onde.
-Se tudo o que pertence a um único recurso estivesse no mesmo arquivo, talvez você não precisasse fazer engenharia reversa em seu próprio código toda vez que precisar atualizar ou corrigir algo.
-Colocar tudo em um único arquivo pode parecer confuso à primeira vista, mas lembre-se de que você é quem decide a granularidade dessa divisão.
-Um "recurso" pode ser um formulário de registro inteiro ou algo tão pequeno quanto um botão que faz algumas verificações antes de permitir que você envie esse formulário. Depende inteiramente de você e, como cada componente é tão completo quanto um recurso inteiro, você pode chamar esse botão ou até mesmo o formulário inteiro em outras páginas de seu aplicativo. Isso nos leva à Verdadeira componentização e reutilização de código.
-Componentização e reutilização de código
Os componentes do Nullstack são autossuficientes.
-A maioria dos frameworks são especializados em apenas uma camada do desenvolvimento. Ao exportar um componente Nullstack, todo o código necessário para rodar o recurso vai ficar junto, sem a necessidade de alocar as outras camadas separadamente.
-Como efeito colateral, aplicativos inteiros podem ser usados como componentes e montados em outros aplicativos como engines.
-Por quê usar Orientação à objetos e não componentes funcionais
À primeira vista, as classes podem parecer mais detalhadas do que os componentes funcionais. -Esta seção explicará os motivos que nos levam a favorecer as classes no desenvolvimento do Nullstack.
-As razões estão, na verdade, conectadas a alguns princípios básicos do Nullstack, sendo:
-Tudo é possivel
Nós não queremos introduzir um “modo Nullstack” de fazer as coisas, queremos que se torne algo acessível a qualquer pessoa com algum conhecimento Javascript.
-Dito isso, o primeiro grande problema foi abordar o gerenciamento de estado de uma forma Javascript padrão. O suporte de componentes funcionais exigiria uma solução semelhante aos ganchos de React.js, que seriam considerados um maneirismo do framework.
-Uma vez que optamos pela imutabilidade como uma restrição do framework, podemos usar a forma nativa de definir variáveis simples. Isto remove a complexidade do gerenciamento de estados, o que foi responsável anteriormente pela necessidade de usar uma biblioteca de terceiros para o gerenciamento dos mesmos
-Nenhum Glue Code ou “baterias incluídas”
O Nullstack pega emprestado o conceito de “bateria incluída” do Ember.js, mas permite que você troque as baterias. Tudo que você precisa para fazer um aplicativo deve fazer parte do framework e ainda ser flexível.
-O framework deve fazer o trabalho pesado e o programador deveria focar na sua própria aplicação. -Por esse motivo tudo que você precisa fazer é declarar suas classes e deixar que o Nullstack instancie elas para você. -Desta forma, nos removemos o aspecto mais doloroso de lidar com classes enquanto mantemos todas as vantagens delas.
-Rota de fuga segura
Orientado a objetos vs. funcional não é um tópico novo e, ultimamente, o primeiro parece ter sido excluído da maioria dos frameworks, não deixando lugar para desenvolvedores que gostam desse padrão.
-É certo que as classes demoraram muito para serem padronizadas em Javascript e o atraso pode ter causado algumas implementações traumáticas ao longo do caminho.
-Embora a programação orientada a objetos possa não ser a melhor solução para todos os problemas, o Nullstack permite que você importe funções livremente e as use nos momentos em que você achar melhor.
-Por que injeção de dependência em vez de modularidade
O contexto do Nullstack usa o padrão de injeção de dependência, o que significa que tudo o que você precisa pode ser solicitado do framework a partir da camada em que está a função.
-O contexto é um objeto com escopo horizontal que é injetado em todas as suas chamadas de função. A natureza não hierárquica desse padrão permite que você mova facilmente a lógica de seu componente conforme seu aplicativo cresce, enquanto ainda evita problemas com threading ou encher seu código-fonte com inúmeras declarações para a mesma coisa.
-Isso tem duas vantagens principais:
--
-
Você vê as dependências de seu código em uma função, em vez de tê-los todos importados na parte superior do arquivo.
-O framework é capaz de lhe dar informações mais precisas sobre o ambiente específico para essa chamada de função.
-
Felicidade do desenvolvedor
A aplicação gerada é suficiente para ser um PWA (Progressive Web App) sem pensar em boilerplates, e ainda mais, você é livre para substituir o comportamento padrão das funções.
-Um conceito emprestado do Ruby é a “felicidade do desenvolvedor”. O objetivo do Nullstack é facilitar a vida do desenvolvedor, simplificando tudo o que for possível sem esconder nada de você.
-Os primeiros desenvolvedores que queríamos deixar felizes somos nós mesmos. Fizemos o Nullstack porque nos divertimos no processo. Tudo começou como um protótipo simples em cima do React.js e nos empolgamos, tornando-o cada vez mais agradável para nós até que se tornou algo próprio.
-Esperamos que você goste de usar o Nullstack tanto quanto nós, porque é isso que mantém este projeto avançando.
-Ele foi criado tendo em mente os programadores acostumados a desenvolver sistemas inteiros sozinhos, mas é facilmente escalável para equipes pequenas ou mesmo grandes, desde que cada programador conheça o fluxo do recurso que deve desenvolver.
\nA Stack
Com a maioria das tecnologias usadas na web hoje em dia, o fluxo mais comum é algo assim:
\n- \n
- Front-end usa um redutor sobre um contexto que chama um fetcher; \n
- Este fetcher traz informações genéricas sobre uma API RESTful; \n
- A API RESTful chama uma rota do servidor, que em seguida chama um controlador, que leva a informação de um modelo e o transforma em um serializer; \n
- Se você precisar de mais de um recurso, este processo deve ser repetido até que todos os recursos sejam buscados; \n
- Depois que todos os dados forem buscados, só então o front-end poderá usá-los; \n
- Raciocinar sobre como lidar como o servidor processará e realizará as etapas acima; \n
Note que tudo que você queria era mostrar algo a partir do banco de dados em uma visualização. Com o Nullstack, você só precisa se preocupar com a lógica. Todo o resto é Glue Code e o framework deve cuidar disso para você.
\nFeature-driven
Se você está acostumado a trabalhar em mais de um projeto ao mesmo tempo ou mesmo se por acaso tiver que dar manutenção esporádica em muitos de seus projetos antigos, você pode ter tropeçado neste cenário: você não se lembra exatamente onde em seu código está a lógica que você está tentando consertar ou melhorar.
\nVocê pode ter um gancho cujas dependências são variáveis locais inicializadas com um estado redux, que foi armazenado em algum ponto por uma ação declarada em algum lugar em seu código fonte e chamada sabe-se lá onde.
\nSe tudo o que pertence a um único recurso estivesse no mesmo arquivo, talvez você não precisasse fazer engenharia reversa em seu próprio código toda vez que precisar atualizar ou corrigir algo.
\nColocar tudo em um único arquivo pode parecer confuso à primeira vista, mas lembre-se de que você é quem decide a granularidade dessa divisão.
\nUm "recurso" pode ser um formulário de registro inteiro ou algo tão pequeno quanto um botão que faz algumas verificações antes de permitir que você envie esse formulário. Depende inteiramente de você e, como cada componente é tão completo quanto um recurso inteiro, você pode chamar esse botão ou até mesmo o formulário inteiro em outras páginas de seu aplicativo. Isso nos leva à Verdadeira componentização e reutilização de código.
\nComponentização e reutilização de código
Os componentes do Nullstack são autossuficientes.
\nA maioria dos frameworks são especializados em apenas uma camada do desenvolvimento. Ao exportar um componente Nullstack, todo o código necessário para rodar o recurso vai ficar junto, sem a necessidade de alocar as outras camadas separadamente.
\nComo efeito colateral, aplicativos inteiros podem ser usados como componentes e montados em outros aplicativos como engines.
\nPor quê usar Orientação à objetos e não componentes funcionais
À primeira vista, as classes podem parecer mais detalhadas do que os componentes funcionais.\nEsta seção explicará os motivos que nos levam a favorecer as classes no desenvolvimento do Nullstack.
\nAs razões estão, na verdade, conectadas a alguns princípios básicos do Nullstack, sendo:
\nTudo é possivel
Nós não queremos introduzir um “modo Nullstack” de fazer as coisas, queremos que se torne algo acessível a qualquer pessoa com algum conhecimento Javascript.
\nDito isso, o primeiro grande problema foi abordar o gerenciamento de estado de uma forma Javascript padrão. O suporte de componentes funcionais exigiria uma solução semelhante aos ganchos de React.js, que seriam considerados um maneirismo do framework.
\nUma vez que optamos pela imutabilidade como uma restrição do framework, podemos usar a forma nativa de definir variáveis simples. Isto remove a complexidade do gerenciamento de estados, o que foi responsável anteriormente pela necessidade de usar uma biblioteca de terceiros para o gerenciamento dos mesmos
\nNenhum Glue Code ou “baterias incluídas”
O Nullstack pega emprestado o conceito de “bateria incluída” do Ember.js, mas permite que você troque as baterias. Tudo que você precisa para fazer um aplicativo deve fazer parte do framework e ainda ser flexível.
\nO framework deve fazer o trabalho pesado e o programador deveria focar na sua própria aplicação.\nPor esse motivo tudo que você precisa fazer é declarar suas classes e deixar que o Nullstack instancie elas para você.\nDesta forma, nos removemos o aspecto mais doloroso de lidar com classes enquanto mantemos todas as vantagens delas.
\nRota de fuga segura
Orientado a objetos vs. funcional não é um tópico novo e, ultimamente, o primeiro parece ter sido excluído da maioria dos frameworks, não deixando lugar para desenvolvedores que gostam desse padrão.
\nÉ certo que as classes demoraram muito para serem padronizadas em Javascript e o atraso pode ter causado algumas implementações traumáticas ao longo do caminho.
\nEmbora a programação orientada a objetos possa não ser a melhor solução para todos os problemas, o Nullstack permite que você importe funções livremente e as use nos momentos em que você achar melhor.
\nPor que injeção de dependência em vez de modularidade
O contexto do Nullstack usa o padrão de injeção de dependência, o que significa que tudo o que você precisa pode ser solicitado do framework a partir da camada em que está a função.
\nO contexto é um objeto com escopo horizontal que é injetado em todas as suas chamadas de função. A natureza não hierárquica desse padrão permite que você mova facilmente a lógica de seu componente conforme seu aplicativo cresce, enquanto ainda evita problemas com threading ou encher seu código-fonte com inúmeras declarações para a mesma coisa.
\nIsso tem duas vantagens principais:
\n- \n
Você vê as dependências de seu código em uma função, em vez de tê-los todos importados na parte superior do arquivo.
\nO framework é capaz de lhe dar informações mais precisas sobre o ambiente específico para essa chamada de função.
\n
Felicidade do desenvolvedor
A aplicação gerada é suficiente para ser um PWA (Progressive Web App) sem pensar em boilerplates, e ainda mais, você é livre para substituir o comportamento padrão das funções.
\nUm conceito emprestado do Ruby é a “felicidade do desenvolvedor”. O objetivo do Nullstack é facilitar a vida do desenvolvedor, simplificando tudo o que for possível sem esconder nada de você.
\nOs primeiros desenvolvedores que queríamos deixar felizes somos nós mesmos. Fizemos o Nullstack porque nos divertimos no processo. Tudo começou como um protótipo simples em cima do React.js e nos empolgamos, tornando-o cada vez mais agradável para nós até que se tornou algo próprio.
\nEsperamos que você goste de usar o Nullstack tanto quanto nós, porque é isso que mantém este projeto avançando.
\n","description":"O único propósito de Nullstack é simplificar o desenvolvimento, eliminando o Glue Code e permitindo-lhe se concentrar na lógica de sua aplicação."},"n-0-0-13":{},"n-0-0-15":{},"n-0-0-16":{"locale":"pt-BR","i18n":{"nullachan":{"alt":"Nulla-Chan","title":"Nulla-Chan: Waifu oficial do Nullstack"},"links":[{"title":"YouTube","href":"https://www.youtube.com/channel/UCUNPaxoppH3lu6JTrUX78Ww"},{"title":"Twitter","href":"https://twitter.com/nullstackapp"},{"title":"GitHub","href":"https://github.com/nullstack"}]}}}, "page": {"image":"/image-1200x630.png","status":200,"title":"Por quê criamos o Nullstack? - Nullstack","description":"O único propósito de Nullstack é simplificar o desenvolvimento, eliminando o Glue Code e permitindo-lhe se concentrar na lógica de sua aplicação."}} \ No newline at end of file diff --git "a/docs/pt-br/trabalhador-servi\303\247o.html" "b/docs/pt-br/trabalhador-servi\303\247o.html" deleted file mode 100644 index e64e45b7..00000000 --- "a/docs/pt-br/trabalhador-servi\303\247o.html" +++ /dev/null @@ -1,54 +0,0 @@ - - - - - -Página Não Encontrada
Talvez você queira aprender como criar uma pagina 404 com Nullstack?
-Se você está procurando por outra coisa, você deveria ler a documentação.
-Página Não Encontrada
Talvez você queira aprender como criar uma pagina 404 com Nullstack?
-Se você está procurando por outra coisa, você deveria ler a documentação.
-Talvez você queira aprender como criar uma pagina 404 com Nullstack?
\nSe você está procurando por outra coisa, você deveria ler a documentação.
\n","description":"Desculpe, essa não é a página que você está procurando","status":404},"n-0-0-13":{},"n-0-0-15":{},"n-0-0-16":{"locale":"pt-BR","i18n":{"nullachan":{"alt":"Nulla-Chan","title":"Nulla-Chan: Waifu oficial do Nullstack"},"links":[{"title":"YouTube","href":"https://www.youtube.com/channel/UCUNPaxoppH3lu6JTrUX78Ww"},{"title":"Twitter","href":"https://twitter.com/nullstackapp"},{"title":"GitHub","href":"https://github.com/nullstack"}]}}}, "page": {"image":"/image-1200x630.png","status":404,"title":"Página Não Encontrada - Nullstack","description":"Desculpe, essa não é a página que você está procurando"}} \ No newline at end of file diff --git a/docs/pt-br/vinculo-bidirecional.html b/docs/pt-br/vinculo-bidirecional.html deleted file mode 100644 index 4366e725..00000000 --- a/docs/pt-br/vinculo-bidirecional.html +++ /dev/null @@ -1,287 +0,0 @@ - - - - - -Two-Way Binding
Big chunks of code in a progressive web application is dedicated to reacting to user input.
-The process of controlling user input can be broken into 3 tedious steps:
--
-
- Declaring a variable with the initial value; -
- Passing the initial value to the input; -
- Observing changes in the input and assigning the new value to the variable. -
The last step might include typecasting and other value treatments.
-This process in which you manually do all these steps is called one-way binding, it is the default in many frameworks, and is possible in Nullstack.
-import Nullstack from 'nullstack';
-
-class Form extends Nullstack {
-
- number = 1;
- string = '';
-
- updateString({event}) {
- this.string = event.target.value;
- }
-
- updateNumber({event}) {
- this.number = parseInt(event.target.value);
- }
-
- render() {
- return (
- <form>
- <input
- type="text"
- name="string"
- value={this.string}
- oninput={this.updateString}
- />
- <input
- type="number"
- name="number"
- value={this.number}
- oninput={this.updateNumber}
- />
- </form>
- )
- }
-
-}
-
-export default Form;
-The bind attribute
Bind reduces drastically the amount of glue code you have to type in your application.
-You can shortcut setting a value, name, and event with the bind attribute.
--💡 Nullstack will simply replace
-bindwith thevalue,name, and event under the hood.
Bind will generate an event that automatically typecasts to the previous primitive type the value was.
-You can pass any variable to the bind as long as its parent object is mentioned.
import Nullstack from 'nullstack';
-
-class Form extends Nullstack {
-
- number = 1;
- string = '';
-
- render() {
- return (
- <form>
- <input type="text" bind={this.string} />
- <input type="number" bind={this.number} />
- </form>
- )
- }
-
-}
-
-export default Form;
-Bound Events
The following events are set for each type of input:
--
-
onclickfor inputs with the checkbox type
-oninputfor other inputs and textareas
-onchangefor anything else
-
You can still declare an attribute with the same bound event.
-Events will not override the bound event, instead, it will be executed after bind mutates the variable.
-The new value will be merged into the function context.
-import Nullstack from 'nullstack';
-
-class Form extends Nullstack {
-
- name = '';
-
- compare({value}) {
- this.name === value;
- }
-
- render() {
- return (
- <input bind={this.name} oninput={this.compare} />
- )
- }
-
-}
-
-export default Form;
-Bind source
Bind can take a source attribute as well.
--💡 If you do not declare a source to the bind, Nullstack will inject a
-source={this}at transpile time in order to completely skip the runtime lookup process!
If you declare a source, bind must be a string with the name of the key that will be mutated.
The source will be merged into the context of events.
-import Nullstack from 'nullstack';
-
-class Paginator extends Nullstack {
-
- validate({source, params}) {
- if(!source.page) {
- params.page = '1';
- }
- }
-
- render({params}) {
- return (
- <input
- source={params}
- bind="page"
- oninput={this.validate}
- />
- )
- }
-
-}
-
-export default Paginator;
---💡 Binding by reference is possible because all binds are converted to the format above at transpile time.
-
Any object that responds to a key call with "[]" can be bound.
-The name attribute can be overwritten.
import Nullstack from 'nullstack';
-
-class Form extends Nullstack {
-
- number = 1;
- boolean = true;
- character = 'a';
- text = 'aaaa';
-
- object = {count: 1};
- array = ['a', 'b', 'c'];
-
- render({params}) {
- return (
- <div>
- <input bind={this.number} />
- <textarea bind={this.text} />
- <select bind={this.character}>
- {this.array.map((character) => <option>{character}</option>)}
- </select>
- <select bind={this.boolean} name="boolean-select">
- <option value={true}>true</option>
- <option value={false}>false</option>
- </select>
- <input bind={this.boolean} type="checkbox" />
- <input bind={this.object.count} />
- {this.array.map((value, index) => (
- <input bind={this.array[index]} />
- ))}
- <input bind={params.page} />
- </div>
- )
- }
-
-}
-
-export default Form;
-Object Events
You can use object events alongside bind normally.
The event will run after the variable is mutated.
-The event will share the bind source.
import Nullstack from 'nullstack';
-
-class Paginator extends Nullstack {
-
- render({params}) {
- return (
- <input bind={params.filter} oninput={{page: 1}} />
- )
- }
-
-}
-
-export default Paginator;
-Bindable Components
You can create your own bindable component by receiving the attributes that bind generates.
You must respond by calling onchange with a value key.
You can also merge any other keys you wish to send to the component user.
-class CurrencyInput extends Nullstack {
-
- parse({event, onchange}) {
- const normalized = event.target.value.replace(',', '').padStart(3, '0');
- const whole = (parseInt(normalized.slice(0,-2)) || 0).toString();
- const decimal = normalized.slice(normalized.length - 2);
- const value = parseFloat(whole+'.'+decimal);
- const bringsHappyness = value >= 1000000;
- onchange({value, bringsHappyness});
- }
-
- render({value, name}) {
- const formatted = value.toFixed(2).replace('.', ',');
- return <input name={name} value={formatted} oninput={this.parse} />
- }
-
-}
-import Nullstack from 'nullstack';
-import CurrencyInput from './CurrencyInput';
-
-class Form extends Nullstack {
-
- balance = 0;
-
- render() {
- return (
- <CurrencyInput bind={this.balance} />
- )
- }
-
-}
-
-export default Form;
-Next step
--🎉 Congratulations!. You are done with the core concepts!
-
⚔ Learn about the application startup.
-Two-Way Binding
Big chunks of code in a progressive web application is dedicated to reacting to user input.
-The process of controlling user input can be broken into 3 tedious steps:
--
-
- Declaring a variable with the initial value; -
- Passing the initial value to the input; -
- Observing changes in the input and assigning the new value to the variable. -
The last step might include typecasting and other value treatments.
-This process in which you manually do all these steps is called one-way binding, it is the default in many frameworks, and is possible in Nullstack.
-import Nullstack from 'nullstack';
-
-class Form extends Nullstack {
-
- number = 1;
- string = '';
-
- updateString({event}) {
- this.string = event.target.value;
- }
-
- updateNumber({event}) {
- this.number = parseInt(event.target.value);
- }
-
- render() {
- return (
- <form>
- <input
- type="text"
- name="string"
- value={this.string}
- oninput={this.updateString}
- />
- <input
- type="number"
- name="number"
- value={this.number}
- oninput={this.updateNumber}
- />
- </form>
- )
- }
-
-}
-
-export default Form;
-The bind attribute
Bind reduces drastically the amount of glue code you have to type in your application.
-You can shortcut setting a value, name, and event with the bind attribute.
--💡 Nullstack will simply replace
-bindwith thevalue,name, and event under the hood.
Bind will generate an event that automatically typecasts to the previous primitive type the value was.
-You can pass any variable to the bind as long as its parent object is mentioned.
import Nullstack from 'nullstack';
-
-class Form extends Nullstack {
-
- number = 1;
- string = '';
-
- render() {
- return (
- <form>
- <input type="text" bind={this.string} />
- <input type="number" bind={this.number} />
- </form>
- )
- }
-
-}
-
-export default Form;
-Bound Events
The following events are set for each type of input:
--
-
onclickfor inputs with the checkbox type
-oninputfor other inputs and textareas
-onchangefor anything else
-
You can still declare an attribute with the same bound event.
-Events will not override the bound event, instead, it will be executed after bind mutates the variable.
-The new value will be merged into the function context.
-import Nullstack from 'nullstack';
-
-class Form extends Nullstack {
-
- name = '';
-
- compare({value}) {
- this.name === value;
- }
-
- render() {
- return (
- <input bind={this.name} oninput={this.compare} />
- )
- }
-
-}
-
-export default Form;
-Bind source
Bind can take a source attribute as well.
--💡 If you do not declare a source to the bind, Nullstack will inject a
-source={this}at transpile time in order to completely skip the runtime lookup process!
If you declare a source, bind must be a string with the name of the key that will be mutated.
The source will be merged into the context of events.
-import Nullstack from 'nullstack';
-
-class Paginator extends Nullstack {
-
- validate({source, params}) {
- if(!source.page) {
- params.page = '1';
- }
- }
-
- render({params}) {
- return (
- <input
- source={params}
- bind="page"
- oninput={this.validate}
- />
- )
- }
-
-}
-
-export default Paginator;
---💡 Binding by reference is possible because all binds are converted to the format above at transpile time.
-
Any object that responds to a key call with "[]" can be bound.
-The name attribute can be overwritten.
import Nullstack from 'nullstack';
-
-class Form extends Nullstack {
-
- number = 1;
- boolean = true;
- character = 'a';
- text = 'aaaa';
-
- object = {count: 1};
- array = ['a', 'b', 'c'];
-
- render({params}) {
- return (
- <div>
- <input bind={this.number} />
- <textarea bind={this.text} />
- <select bind={this.character}>
- {this.array.map((character) => <option>{character}</option>)}
- </select>
- <select bind={this.boolean} name="boolean-select">
- <option value={true}>true</option>
- <option value={false}>false</option>
- </select>
- <input bind={this.boolean} type="checkbox" />
- <input bind={this.object.count} />
- {this.array.map((value, index) => (
- <input bind={this.array[index]} />
- ))}
- <input bind={params.page} />
- </div>
- )
- }
-
-}
-
-export default Form;
-Object Events
You can use object events alongside bind normally.
The event will run after the variable is mutated.
-The event will share the bind source.
import Nullstack from 'nullstack';
-
-class Paginator extends Nullstack {
-
- render({params}) {
- return (
- <input bind={params.filter} oninput={{page: 1}} />
- )
- }
-
-}
-
-export default Paginator;
-Bindable Components
You can create your own bindable component by receiving the attributes that bind generates.
You must respond by calling onchange with a value key.
You can also merge any other keys you wish to send to the component user.
-class CurrencyInput extends Nullstack {
-
- parse({event, onchange}) {
- const normalized = event.target.value.replace(',', '').padStart(3, '0');
- const whole = (parseInt(normalized.slice(0,-2)) || 0).toString();
- const decimal = normalized.slice(normalized.length - 2);
- const value = parseFloat(whole+'.'+decimal);
- const bringsHappyness = value >= 1000000;
- onchange({value, bringsHappyness});
- }
-
- render({value, name}) {
- const formatted = value.toFixed(2).replace('.', ',');
- return <input name={name} value={formatted} oninput={this.parse} />
- }
-
-}
-import Nullstack from 'nullstack';
-import CurrencyInput from './CurrencyInput';
-
-class Form extends Nullstack {
-
- balance = 0;
-
- render() {
- return (
- <CurrencyInput bind={this.balance} />
- )
- }
-
-}
-
-export default Form;
-Next step
--🎉 Congratulations!. You are done with the core concepts!
-
⚔ Learn about the application startup.
-Big chunks of code in a progressive web application is dedicated to reacting to user input.
\nThe process of controlling user input can be broken into 3 tedious steps:
\n- \n
- Declaring a variable with the initial value; \n
- Passing the initial value to the input; \n
- Observing changes in the input and assigning the new value to the variable. \n
The last step might include typecasting and other value treatments.
\nThis process in which you manually do all these steps is called one-way binding, it is the default in many frameworks, and is possible in Nullstack.
\nimport Nullstack from 'nullstack';\n\nclass Form extends Nullstack {\n\n number = 1;\n string = '';\n\n updateString({event}) {\n this.string = event.target.value;\n }\n\n updateNumber({event}) {\n this.number = parseInt(event.target.value);\n }\n \n render() {\n return (\n <form>\n <input\n type=\"text\"\n name=\"string\"\n value={this.string}\n oninput={this.updateString}\n />\n <input\n type=\"number\"\n name=\"number\"\n value={this.number}\n oninput={this.updateNumber}\n />\n </form>\n )\n }\n\n}\n\nexport default Form;\nThe bind attribute
Bind reduces drastically the amount of glue code you have to type in your application.
\nYou can shortcut setting a value, name, and event with the bind attribute.
\n\n💡 Nullstack will simply replace
\nbindwith thevalue,name, and event under the hood.
Bind will generate an event that automatically typecasts to the previous primitive type the value was.
\nYou can pass any variable to the bind as long as its parent object is mentioned.
import Nullstack from 'nullstack';\n\nclass Form extends Nullstack {\n\n number = 1;\n string = '';\n \n render() {\n return (\n <form>\n <input type=\"text\" bind={this.string} />\n <input type=\"number\" bind={this.number} />\n </form>\n )\n }\n\n}\n\nexport default Form;\nBound Events
The following events are set for each type of input:
\n- \n
onclickfor inputs with the checkbox type \noninputfor other inputs and textareas \nonchangefor anything else \n
You can still declare an attribute with the same bound event.
\nEvents will not override the bound event, instead, it will be executed after bind mutates the variable.
\nThe new value will be merged into the function context.
\nimport Nullstack from 'nullstack';\n\nclass Form extends Nullstack {\n\n name = '';\n\n compare({value}) {\n this.name === value;\n }\n \n render() {\n return (\n <input bind={this.name} oninput={this.compare} />\n )\n }\n\n}\n\nexport default Form;\nBind source
Bind can take a source attribute as well.
\n\n💡 If you do not declare a source to the bind, Nullstack will inject a
\nsource={this}at transpile time in order to completely skip the runtime lookup process!
If you declare a source, bind must be a string with the name of the key that will be mutated.
The source will be merged into the context of events.
\nimport Nullstack from 'nullstack';\n\nclass Paginator extends Nullstack {\n\n validate({source, params}) {\n if(!source.page) {\n params.page = '1';\n }\n }\n\n render({params}) {\n return (\n <input \n source={params}\n bind=\"page\"\n oninput={this.validate}\n />\n )\n }\n\n}\n\nexport default Paginator;\n\n\n💡 Binding by reference is possible because all binds are converted to the format above at transpile time.
\n
Any object that responds to a key call with "[]" can be bound.
\nThe name attribute can be overwritten.
import Nullstack from 'nullstack';\n\nclass Form extends Nullstack {\n\n number = 1;\n boolean = true;\n character = 'a';\n text = 'aaaa';\n \n object = {count: 1};\n array = ['a', 'b', 'c'];\n\n render({params}) {\n return (\n <div>\n <input bind={this.number} />\n <textarea bind={this.text} />\n <select bind={this.character}>\n {this.array.map((character) => <option>{character}</option>)}\n </select>\n <select bind={this.boolean} name=\"boolean-select\">\n <option value={true}>true</option>\n <option value={false}>false</option>\n </select>\n <input bind={this.boolean} type=\"checkbox\" />\n <input bind={this.object.count} />\n {this.array.map((value, index) => (\n <input bind={this.array[index]} />\n ))}\n <input bind={params.page} />\n </div>\n )\n }\n\n}\n\nexport default Form;\nObject Events
You can use object events alongside bind normally.
The event will run after the variable is mutated.
\nThe event will share the bind source.
import Nullstack from 'nullstack';\n\nclass Paginator extends Nullstack {\n\n render({params}) {\n return (\n <input bind={params.filter} oninput={{page: 1}} />\n )\n }\n\n}\n\nexport default Paginator;\nBindable Components
You can create your own bindable component by receiving the attributes that bind generates.
You must respond by calling onchange with a value key.
You can also merge any other keys you wish to send to the component user.
\nclass CurrencyInput extends Nullstack {\n\n parse({event, onchange}) {\n const normalized = event.target.value.replace(',', '').padStart(3, '0');\n const whole = (parseInt(normalized.slice(0,-2)) || 0).toString();\n const decimal = normalized.slice(normalized.length - 2);\n const value = parseFloat(whole+'.'+decimal);\n const bringsHappyness = value >= 1000000;\n onchange({value, bringsHappyness});\n }\n\n render({value, name}) {\n const formatted = value.toFixed(2).replace('.', ',');\n return <input name={name} value={formatted} oninput={this.parse} />\n }\n\n}\nimport Nullstack from 'nullstack';\nimport CurrencyInput from './CurrencyInput';\n\nclass Form extends Nullstack {\n\n balance = 0;\n\n render() {\n return (\n <CurrencyInput bind={this.balance} />\n )\n }\n\n}\n\nexport default Form;\nNext step
\n\n🎉 Congratulations!. You are done with the core concepts!
\n
⚔ Learn about the application startup.
\n","description":"Bind reduces drastically the amount of glue code you have to type in your application."},"n-0-0-13":{},"n-0-0-15":{},"n-0-0-16":{"locale":"pt-BR","i18n":{"nullachan":{"alt":"Nulla-Chan","title":"Nulla-Chan: Waifu oficial do Nullstack"},"links":[{"title":"YouTube","href":"https://www.youtube.com/channel/UCUNPaxoppH3lu6JTrUX78Ww"},{"title":"Twitter","href":"https://twitter.com/nullstackapp"},{"title":"GitHub","href":"https://github.com/nullstack"}]}}}, "page": {"image":"/image-1200x630.png","status":200,"title":"Two-Way Binding - Nullstack","description":"Bind reduces drastically the amount of glue code you have to type in your application."}} \ No newline at end of file diff --git a/docs/pt-br/waifu.html b/docs/pt-br/waifu.html deleted file mode 100644 index f781243a..00000000 --- a/docs/pt-br/waifu.html +++ /dev/null @@ -1,52 +0,0 @@ - - - - - -
Nulla - Chan
Waifu oficial do Nullstack
- 🕐 Idade: 19
- ♒ Signo: Aquário
- 🎂 Aniversário: 28 de Janeiro
- 💖 Tipo Sanguíneo: A
- 📏 Altura: 1,55m
- 🍨 Comida Favorita: Qualquer coisa com sabor de baunilha
- 🧩 Hobby: Reinventar Rodas
- 🧠 Neurodivergências: TDAH e TEA
Uma doce e tímida waifu perfeita, está sempre hiperfocada em seus estudos, mas de alguma forma distraída ao mesmo tempo.
Está sempre alegre... até que ela tenha que enfrentar código grudento ou ver um post dizendo que tecnologia ela deve usar.
Nulla - Chan
Waifu oficial do Nullstack
- 🕐 Idade: 19
- ♒ Signo: Aquário
- 🎂 Aniversário: 28 de Janeiro
- 💖 Tipo Sanguíneo: A
- 📏 Altura: 1,55m
- 🍨 Comida Favorita: Qualquer coisa com sabor de baunilha
- 🧩 Hobby: Reinventar Rodas
- 🧠 Neurodivergências: TDAH e TEA
Uma doce e tímida waifu perfeita, está sempre hiperfocada em seus estudos, mas de alguma forma distraída ao mesmo tempo.
Está sempre alegre... até que ela tenha que enfrentar código grudento ou ver um post dizendo que tecnologia ela deve usar.
Renderable Components
The simplest component you can make is a renderable component.
-Renderable components are very similar to web components, they give you the ability to create new HTML tags that shortcut a group of other HTML tags.
-Create a file in your src folder with the name of your component and the njs extension.
-In this example it is going to be called HelloWorld.njs.
-All you have to do is to import Nullstack or any of its subclasses and extend your class from it, define an instance method called render that returns any JSX, and export the component.
---✨ Install the official Nullstack VSCode Extension to generate classes with a snippet.
-
import Nullstack from 'nullstack';
-
-class HelloWorld extends Nullstack {
-
- render() {
- return (
- <div> Hello World </div>
- )
- }
-
-}
-
-export default HelloWorld;
-The code above is just declaring the component, you still have to use it.
-Importing the component in your application gives you the ability to use a new tag in your render.
-This tag will be replaced with whatever you returned in your component render.
-import Nullstack from 'nullstack';
-
-import './Application.scss';
-
-import HelloWorld from './HelloWorld';
-
-class Application extends Nullstack {
-
- // ...
-
- render({page}) {
- return (
- <main>
- <h1> {page.title} </h1>
- <a href="https://nullstack.app/documentation" target="_blank"> Read the documentation </a>
- <HelloWorld />
- </main>
- )
- }
-
-}
-
-export default Application;
-Using HTML attributes
Nullstack JSX deviates a little from the spec.
-You can use the normal HTML attributes like class and for directly.
<label for="input" class="dont-label-me"> I am a label </label>
-Headless components
If you want to skip rendering the component at all you can simply return false from the render.
import Nullstack from 'nullstack';
-
-class Headless extends Nullstack {
-
- render() {
- return false;
- }
-
-}
-
-export default Headless;
-This will allocate DOM space for when you decide to render markup there.
-This is also useful for conditional rendering.
-If all you want to do is to generate an invisible component you can skip defining the render method at all.
-Inner components
Instead of creating a new component just to organize code-splitting, you can create an inner component.
-Inner components are any method that the name starts with render followed by an uppercase character.
Inner components share the same instance and scope as the main component, therefore, are very convenient to avoid problems like props drilling.
-To invoke the inner component use a JSX tag with the method name without the render prefix.
import Nullstack from 'nullstack';
-
-class Post extends Nullstack {
-
- renderArticle() {
- return (
- <article> Content </article>
- )
- }
-
- renderAside() {
- return (
- <aside> Related content </aside>
- )
- }
-
- render() {
- return (
- <div>
- <Article />
- <Aside />
- </div>
- )
- }
-
-}
-
-export default HelloWorld;
---💡 Nullstack will inject a constant reference to the function at transpile time in order to completely skip the runtime lookup process!
-
Boolean attributes
Attributes can be assigned as a boolean.
-When the value is false the attribute will not be rendered at all.
When the value is true it will be rendered as a boolean attribute without a string value.
<button disabled={false}> Button </button>
-You can shortcut attributes when you know the value will always be true.
-<button disabled> Button </button>
---✨ Learn more about attributes.
-
Element tag
If you need to decide the tag name at runtime, you can use the element tag and set the tag attribute conditionally.
-<element tag={!!link ? 'a' : 'span'} href={link || false}>
- some arbitrary text
-</element>
-When the tag attribute is omitted, Nullstack will default to a div.
SVG Elements
SVG can be used as if it were any regular HTML tag.
-You can manipulate the SVG using attributes and events normally.
-<svg height={this.size} viewBox="0 0 100 100">
- <circle cx="50" cy="50" r="40" onclick={this.grow} />
-</svg>
---✨ Learn more about events.
-
Components with children
Your component can be invoked passing a block of content.
-<Header>
- <h1> Hello World </h1>
-</Header>
-This doesn't automatically render the block since it wouldn't know where to place it.
-You can destructure the children on the render method and place it in your markup.
-import Nullstack from 'nullstack';
-
-class Header extends Nullstack {
-
- render({children}) {
- return (
- <div>{children}</div>
- )
- }
-
-}
-
-export default Header;
---✨ This is possible because the
-childrenkey is part of the instance context.
Lists
You can map over lists without declaring a key.
Lists that may change length must be wrapped in a parent element just for them.
-<ul>
- {list.map((item) => <li>{item.name}</li>)}
-</ul>
-You can emulate a fixed-size list by returning false instead of an element to reserve dom space.
{list.map((item) => (
- item.visible ? <div>{item.name}</div> : false
-)}
-It's a nice practice to use inner components combined with lists to clean up your code.
-import Nullstack from 'nullstack';
-
-class List extends Nullstack {
-
- items = [
- {visible: true, number: 1},
- {visible: false, number: 2},
- {visible: true, number: 3}
- ]
-
- renderItem({visible, number}) {
- if(!visible) return false;
- return (
- <li> {number} </li>
- )
- }
-
- render() {
- return (
- <ul>
- {this.items.map((item) => <Item {...item} />)}
- </ul>
- )
- }
-
-}
-
-export default List;
---✨ Sometimes you will notice keys in the map. Learn more about the instance key.
-
Inner HTML
You can set the inner HTML of an element with the html attribute.
Links inside the HTML string will be replaced with routable anchors.
-import Nullstack from 'nullstack';
-
-class Post extends Nullstack {
-
- content = `
- <h1> This is a Post </h1>
- <a href="/other-post">
- Check this other post
- </a>
- `;
-
- render() {
- return (
- <article html={this.content} />
- )
- }
-
-}
-
-export default Post;
---🔥 Be careful! When using user-generated HTML you are in risk of script injection
-
The head tag
Renderable components can render inside the head tag an unlimited number of times at any depth of the application.
The head tag will only be updated during the server-side rendering process and changes will be ignored after the hydration process.
import Nullstack from 'nullstack';
-
-class Application extends Nullstack {
-
- // ...
-
- render() {
- return (
- <main>
- <div>
- <head>
- <link rel="preconnect" href="https://www.googletagmanager.com" />
- </head>
- </div>
- <head>
- <link rel="preload" href="/roboto-v20-latin-300.woff2" as="font" type="font/woff2" crossorigin />
- <link rel="preload" href="/crete-round-v9-latin-regular.woff2" as="font" type="font/woff2" crossorigin />
- </head>
- </main>
- )
- }
-
-}
-
-export default Application;
---🔥 You should not use the
-headtag to update metatags that Nullstack already controls
Next step
⚔ Add state to your component using stateful components.
-Renderable Components
The simplest component you can make is a renderable component.
-Renderable components are very similar to web components, they give you the ability to create new HTML tags that shortcut a group of other HTML tags.
-Create a file in your src folder with the name of your component and the njs extension.
-In this example it is going to be called HelloWorld.njs.
-All you have to do is to import Nullstack or any of its subclasses and extend your class from it, define an instance method called render that returns any JSX, and export the component.
---✨ Install the official Nullstack VSCode Extension to generate classes with a snippet.
-
import Nullstack from 'nullstack';
-
-class HelloWorld extends Nullstack {
-
- render() {
- return (
- <div> Hello World </div>
- )
- }
-
-}
-
-export default HelloWorld;
-The code above is just declaring the component, you still have to use it.
-Importing the component in your application gives you the ability to use a new tag in your render.
-This tag will be replaced with whatever you returned in your component render.
-import Nullstack from 'nullstack';
-
-import './Application.scss';
-
-import HelloWorld from './HelloWorld';
-
-class Application extends Nullstack {
-
- // ...
-
- render({page}) {
- return (
- <main>
- <h1> {page.title} </h1>
- <a href="https://nullstack.app/documentation" target="_blank"> Read the documentation </a>
- <HelloWorld />
- </main>
- )
- }
-
-}
-
-export default Application;
-Using HTML attributes
Nullstack JSX deviates a little from the spec.
-You can use the normal HTML attributes like class and for directly.
<label for="input" class="dont-label-me"> I am a label </label>
-Headless components
If you want to skip rendering the component at all you can simply return false from the render.
import Nullstack from 'nullstack';
-
-class Headless extends Nullstack {
-
- render() {
- return false;
- }
-
-}
-
-export default Headless;
-This will allocate DOM space for when you decide to render markup there.
-This is also useful for conditional rendering.
-If all you want to do is to generate an invisible component you can skip defining the render method at all.
-Inner components
Instead of creating a new component just to organize code-splitting, you can create an inner component.
-Inner components are any method that the name starts with render followed by an uppercase character.
Inner components share the same instance and scope as the main component, therefore, are very convenient to avoid problems like props drilling.
-To invoke the inner component use a JSX tag with the method name without the render prefix.
import Nullstack from 'nullstack';
-
-class Post extends Nullstack {
-
- renderArticle() {
- return (
- <article> Content </article>
- )
- }
-
- renderAside() {
- return (
- <aside> Related content </aside>
- )
- }
-
- render() {
- return (
- <div>
- <Article />
- <Aside />
- </div>
- )
- }
-
-}
-
-export default HelloWorld;
---💡 Nullstack will inject a constant reference to the function at transpile time in order to completely skip the runtime lookup process!
-
Boolean attributes
Attributes can be assigned as a boolean.
-When the value is false the attribute will not be rendered at all.
When the value is true it will be rendered as a boolean attribute without a string value.
<button disabled={false}> Button </button>
-You can shortcut attributes when you know the value will always be true.
-<button disabled> Button </button>
---✨ Learn more about attributes.
-
Element tag
If you need to decide the tag name at runtime, you can use the element tag and set the tag attribute conditionally.
-<element tag={!!link ? 'a' : 'span'} href={link || false}>
- some arbitrary text
-</element>
-When the tag attribute is omitted, Nullstack will default to a div.
SVG Elements
SVG can be used as if it were any regular HTML tag.
-You can manipulate the SVG using attributes and events normally.
-<svg height={this.size} viewBox="0 0 100 100">
- <circle cx="50" cy="50" r="40" onclick={this.grow} />
-</svg>
---✨ Learn more about events.
-
Components with children
Your component can be invoked passing a block of content.
-<Header>
- <h1> Hello World </h1>
-</Header>
-This doesn't automatically render the block since it wouldn't know where to place it.
-You can destructure the children on the render method and place it in your markup.
-import Nullstack from 'nullstack';
-
-class Header extends Nullstack {
-
- render({children}) {
- return (
- <div>{children}</div>
- )
- }
-
-}
-
-export default Header;
---✨ This is possible because the
-childrenkey is part of the instance context.
Lists
You can map over lists without declaring a key.
Lists that may change length must be wrapped in a parent element just for them.
-<ul>
- {list.map((item) => <li>{item.name}</li>)}
-</ul>
-You can emulate a fixed-size list by returning false instead of an element to reserve dom space.
{list.map((item) => (
- item.visible ? <div>{item.name}</div> : false
-)}
-It's a nice practice to use inner components combined with lists to clean up your code.
-import Nullstack from 'nullstack';
-
-class List extends Nullstack {
-
- items = [
- {visible: true, number: 1},
- {visible: false, number: 2},
- {visible: true, number: 3}
- ]
-
- renderItem({visible, number}) {
- if(!visible) return false;
- return (
- <li> {number} </li>
- )
- }
-
- render() {
- return (
- <ul>
- {this.items.map((item) => <Item {...item} />)}
- </ul>
- )
- }
-
-}
-
-export default List;
---✨ Sometimes you will notice keys in the map. Learn more about the instance key.
-
Inner HTML
You can set the inner HTML of an element with the html attribute.
Links inside the HTML string will be replaced with routable anchors.
-import Nullstack from 'nullstack';
-
-class Post extends Nullstack {
-
- content = `
- <h1> This is a Post </h1>
- <a href="/other-post">
- Check this other post
- </a>
- `;
-
- render() {
- return (
- <article html={this.content} />
- )
- }
-
-}
-
-export default Post;
---🔥 Be careful! When using user-generated HTML you are in risk of script injection
-
The head tag
Renderable components can render inside the head tag an unlimited number of times at any depth of the application.
The head tag will only be updated during the server-side rendering process and changes will be ignored after the hydration process.
import Nullstack from 'nullstack';
-
-class Application extends Nullstack {
-
- // ...
-
- render() {
- return (
- <main>
- <div>
- <head>
- <link rel="preconnect" href="https://www.googletagmanager.com" />
- </head>
- </div>
- <head>
- <link rel="preload" href="/roboto-v20-latin-300.woff2" as="font" type="font/woff2" crossorigin />
- <link rel="preload" href="/crete-round-v9-latin-regular.woff2" as="font" type="font/woff2" crossorigin />
- </head>
- </main>
- )
- }
-
-}
-
-export default Application;
---🔥 You should not use the
-headtag to update metatags that Nullstack already controls
Next step
⚔ Add state to your component using stateful components.
-The simplest component you can make is a renderable component.
\nRenderable components are very similar to web components, they give you the ability to create new HTML tags that shortcut a group of other HTML tags.
\nCreate a file in your src folder with the name of your component and the njs extension.
\nIn this example it is going to be called HelloWorld.njs.
\nAll you have to do is to import Nullstack or any of its subclasses and extend your class from it, define an instance method called render that returns any JSX, and export the component.
\n\n\n✨ Install the official Nullstack VSCode Extension to generate classes with a snippet.
\n
import Nullstack from 'nullstack';\n\nclass HelloWorld extends Nullstack {\n \n render() {\n return (\n <div> Hello World </div>\n )\n }\n\n}\n\nexport default HelloWorld;\nThe code above is just declaring the component, you still have to use it.
\nImporting the component in your application gives you the ability to use a new tag in your render.
\nThis tag will be replaced with whatever you returned in your component render.
\nimport Nullstack from 'nullstack';\n\nimport './Application.scss';\n\nimport HelloWorld from './HelloWorld';\n\nclass Application extends Nullstack {\n\n // ...\n\n render({page}) {\n return (\n <main>\n <h1> {page.title} </h1>\n <a href=\"https://nullstack.app/documentation\" target=\"_blank\"> Read the documentation </a>\n <HelloWorld />\n </main>\n )\n }\n\n}\n\nexport default Application;\nUsing HTML attributes
Nullstack JSX deviates a little from the spec.
\nYou can use the normal HTML attributes like class and for directly.
<label for=\"input\" class=\"dont-label-me\"> I am a label </label>\nHeadless components
If you want to skip rendering the component at all you can simply return false from the render.
import Nullstack from 'nullstack';\n\nclass Headless extends Nullstack {\n \n render() {\n return false;\n }\n\n}\n\nexport default Headless;\nThis will allocate DOM space for when you decide to render markup there.
\nThis is also useful for conditional rendering.
\nIf all you want to do is to generate an invisible component you can skip defining the render method at all.
\nInner components
Instead of creating a new component just to organize code-splitting, you can create an inner component.
\nInner components are any method that the name starts with render followed by an uppercase character.
Inner components share the same instance and scope as the main component, therefore, are very convenient to avoid problems like props drilling.
\nTo invoke the inner component use a JSX tag with the method name without the render prefix.
import Nullstack from 'nullstack';\n\nclass Post extends Nullstack {\n\n renderArticle() {\n return (\n <article> Content </article>\n )\n }\n\n renderAside() {\n return (\n <aside> Related content </aside>\n )\n }\n \n render() {\n return (\n <div>\n <Article />\n <Aside />\n </div>\n )\n }\n\n}\n\nexport default HelloWorld;\n\n\n💡 Nullstack will inject a constant reference to the function at transpile time in order to completely skip the runtime lookup process!
\n
Boolean attributes
Attributes can be assigned as a boolean.
\nWhen the value is false the attribute will not be rendered at all.
When the value is true it will be rendered as a boolean attribute without a string value.
<button disabled={false}> Button </button>\nYou can shortcut attributes when you know the value will always be true.
\n<button disabled> Button </button>\n\n\n✨ Learn more about attributes.
\n
Element tag
If you need to decide the tag name at runtime, you can use the element tag and set the tag attribute conditionally.
\n<element tag={!!link ? 'a' : 'span'} href={link || false}>\n some arbitrary text\n</element>\nWhen the tag attribute is omitted, Nullstack will default to a div.
SVG Elements
SVG can be used as if it were any regular HTML tag.
\nYou can manipulate the SVG using attributes and events normally.
\n<svg height={this.size} viewBox=\"0 0 100 100\">\n <circle cx=\"50\" cy=\"50\" r=\"40\" onclick={this.grow} />\n</svg> \n\n\n✨ Learn more about events.
\n
Components with children
Your component can be invoked passing a block of content.
\n<Header> \n <h1> Hello World </h1>\n</Header>\nThis doesn't automatically render the block since it wouldn't know where to place it.
\nYou can destructure the children on the render method and place it in your markup.
\nimport Nullstack from 'nullstack';\n\nclass Header extends Nullstack {\n \n render({children}) {\n return (\n <div>{children}</div>\n )\n }\n\n}\n\nexport default Header;\n\n\n✨ This is possible because the
\nchildrenkey is part of the instance context.
Lists
You can map over lists without declaring a key.
Lists that may change length must be wrapped in a parent element just for them.
\n<ul>\n {list.map((item) => <li>{item.name}</li>)}\n</ul>\nYou can emulate a fixed-size list by returning false instead of an element to reserve dom space.
{list.map((item) => (\n item.visible ? <div>{item.name}</div> : false\n)}\nIt's a nice practice to use inner components combined with lists to clean up your code.
\nimport Nullstack from 'nullstack';\n\nclass List extends Nullstack {\n\n items = [\n {visible: true, number: 1},\n {visible: false, number: 2},\n {visible: true, number: 3}\n ]\n\n renderItem({visible, number}) {\n if(!visible) return false;\n return (\n <li> {number} </li>\n )\n }\n \n render() {\n return (\n <ul>\n {this.items.map((item) => <Item {...item} />)}\n </ul>\n )\n }\n\n}\n\nexport default List;\n\n\n✨ Sometimes you will notice keys in the map. Learn more about the instance key.
\n
Inner HTML
You can set the inner HTML of an element with the html attribute.
Links inside the HTML string will be replaced with routable anchors.
\nimport Nullstack from 'nullstack';\n\nclass Post extends Nullstack {\n\n content = `\n <h1> This is a Post </h1>\n <a href=\"/other-post\">\n Check this other post\n </a>\n `;\n \n render() {\n return (\n <article html={this.content} />\n )\n }\n\n}\n\nexport default Post;\n\n\n🔥 Be careful! When using user-generated HTML you are in risk of script injection
\n
The head tag
Renderable components can render inside the head tag an unlimited number of times at any depth of the application.
The head tag will only be updated during the server-side rendering process and changes will be ignored after the hydration process.
import Nullstack from 'nullstack';\n\nclass Application extends Nullstack {\n\n // ...\n\n render() {\n return (\n <main>\n <div>\n <head>\n <link rel=\"preconnect\" href=\"https://www.googletagmanager.com\" />\n </head>\n </div>\n <head>\n <link rel=\"preload\" href=\"/roboto-v20-latin-300.woff2\" as=\"font\" type=\"font/woff2\" crossorigin />\n <link rel=\"preload\" href=\"/crete-round-v9-latin-regular.woff2\" as=\"font\" type=\"font/woff2\" crossorigin />\n </head>\n </main>\n )\n }\n\n}\n\nexport default Application;\n\n\n🔥 You should not use the
\nheadtag to update metatags that Nullstack already controls
Next step
⚔ Add state to your component using stateful components.
\n","description":"Renderable components are very similar to web components they give you the ability to create new HTML tags that shortcut a group of other HTML tags"},"n-0-0-13":{},"n-0-0-15":{},"n-0-0-16":{"locale":"en-US","i18n":{"nullachan":{"alt":"Nulla-Chan","title":"Nulla-Chan: Nullstack's official waifu"},"links":[{"title":"YouTube","href":"https://www.youtube.com/channel/UCUNPaxoppH3lu6JTrUX78Ww"},{"title":"Twitter","href":"https://twitter.com/nullstackapp"},{"title":"GitHub","href":"https://github.com/nullstack"}]}}}, "page": {"image":"/image-1200x630.png","status":200,"title":"Renderable Components - Nullstack","description":"Renderable components are very similar to web components they give you the ability to create new HTML tags that shortcut a group of other HTML tags"}} \ No newline at end of file diff --git a/docs/roboto-v20-latin-300.woff2 b/docs/roboto-v20-latin-300.woff2 deleted file mode 100644 index ef8c8836..00000000 Binary files a/docs/roboto-v20-latin-300.woff2 and /dev/null differ diff --git a/docs/roboto-v20-latin-500.woff2 b/docs/roboto-v20-latin-500.woff2 deleted file mode 100644 index 6362d7f6..00000000 Binary files a/docs/roboto-v20-latin-500.woff2 and /dev/null differ diff --git a/docs/robots.txt b/docs/robots.txt deleted file mode 100644 index 95a840fc..00000000 --- a/docs/robots.txt +++ /dev/null @@ -1,3 +0,0 @@ -User-Agent: * -Allow: / -Sitemap: https://nullstack.app/sitemap.xml \ No newline at end of file diff --git a/docs/routes-and-params.html b/docs/routes-and-params.html deleted file mode 100644 index a906c457..00000000 --- a/docs/routes-and-params.html +++ /dev/null @@ -1,298 +0,0 @@ - - - - - -Routes and Params
Nullstack has built-in routes, it would make no sense otherwise since web applications are expected to have hyperlinks.
-Any tag can receive a route attribute, be it a component, inner component, or simple HTML tag.
import Nullstack from 'nullstack';
-import Page from './Page';
-
-class Application extends Nullstack {
-
- renderHome() {
- return (
- <section> Home </section>
- )
- }
-
- render({count}) {
- return (
- <main>
- <Home route="/" />
- <Page route="/page" />
- <abbr route="/abbreviations"> Abbreviations </abbr>
- </main>
- )
- }
-
-}
-
-export default Application;
-Links
Links on Nullstack are simple a tags with the href value starting with "/".
<a href="/page/about"> About Page </a>
---💡 On the client side the click event will push history without reloading the page.
-
--✨ You can still assign your own click event to the tag without losing the framework behavior.
-
Params
The params key is an object proxy injected into every client instance.
Each query string param is mapped to this object.
-By default any key you request from this object will return a string.
-If the value is undefined it will return an empty string.
If the value is true or false it will return a boolean instead.
--🐱💻 Bellow an exemple that visits "/books?expanded=true&page=2":
-
import Nullstack from 'nullstack';
-
-class Books extends Nullstack {
-
- async initiate({params}) {
- if(params.expanded) {
- const page = parseInt(params.page) || 1;
- this.books = await this.getBooks({page});
- }
- }
-
-}
-
-export default Books;
-Assigning to a params key will cause a redirect to the route with updated params.
-When you assign to a param, the value will be converted to JSON before being set.
---💡 Redirects work in batches, so there is no performance loss in multiple assignments.
-
import Nullstack from 'nullstack';
-
-class Paginator extends Nullstack {
-
- handleClick({params}) {
- params.filter = '';
- params.page = 1;
- }
-
-}
-
-export default Paginator;
-Assigning an empty string to a param will remove it from the url.
-Dynamic Segments
Part of the route can be an expression started with ":" followed by a param name.
-This value will be matched against any string in the same directory position.
-The value of the string in the URL will be assigned to the context params and functions below this point in the hierarchy will have access to the new key.
---🐱💻 Bellow an example that visits "/category/suspense?page=2":
-
import Nullstack from 'nullstack';
-
-class Books extends Nullstack {
-
- async initiate({params}) {
- const page = parseInt(params.page) || 1;
- const category = params.slug;
- this.books = await this.getBooks({category, page});
- }
-
-}
-
-export default Books;
-import Nullstack from 'nullstack';
-import Books from './Books';
-
-class Application extends Nullstack {
-
- render() {
- <main>
- <Books route="/category/:slug">
- </main>
- }
-
-}
-
-export default Application;
-When a dynamic segment is changed, as for example moving from "/category/suspense" to "/category/comedy", the component will be terminated and a new instance will be created.
-Changing a query param will not re-instantiate the component.
-Children of the component will not be re-instantiated automatically, you can set the same route to the children or do it manually if you desire this behavior.
---💡 The behavior mentioned above solves many of the problems you have to normally deal with manually.
-
Wildcards
Wildcards are routes declared with "*" as the attribute value.
-These routes will match anything if nothing above it matches the requested URL.
-import Nullstack from 'nullstack';
-import Home from './Home';
-
-class Application extends Nullstack {
-
- render({count}) {
- return (
- <main>
- <Home route="/" />
- <div route="*"> Wildcard </div>
- </main>
- )
- }
-
-}
-Wildcards can be prefixed with a segment.
---✨ this is especially useful for engines that can be mounted in your application.
-
import Nullstack from 'nullstack';
-import Home from './Home';
-import BlogEngine from './BlogEngine';
-
-class Application extends Nullstack {
-
- render({count}) {
- return (
- <main>
- <Home route="/" />
- <BlogEngine route="/blog/*" />
- </main>
- )
- }
-
-}
-Router
The router key is an object proxy injected into every client instance.
The router has two keys:
-
-
url
-path
-
The url key returns everything after the domain including the path and the query params as a string.
The path key returns only the path without query params.
--💡 Both keys above automatically remove the trailing slash for convenience.
-
Assigning to url or path will cause a redirect.
import Nullstack from 'nullstack';
-
-class Application extends Nullstack {
-
- prepare({router}) {
- if(router.path == '/') {
- router.path = '/dashboard';
- }
- }
-
-}
---💡 Under the hood
-atags withparamsuse therouter.
Custom Events
Updating router.url or router.path will raise a custom event.
import Nullstack from 'nullstack';
-
-class Analytics extends Nullstack {
-
- hydrate({router}) {
- window.addEventListener(router.event, () => {
- console.log(router.url);
- });
- }
-
-}
-
-export default Analytics;
-Special anchors
Anchor tags accept some convenient special attributes besides the regular href.
You can set the params attribute with an object as the value.
The path will remain the same as the current router path, but the params will be replaced by the new params you specify.
<a params={{page: 1}}> First Page </a>
-If you wish to just update some params and keep the others, you can use the javascript spread operator for that.
-<a params={{...params, page: 1}}> First Page </a>
-You can set the path attribute with a string starting with "/" and no query params.
The params will remain the same, but the path will be updated.
<a path="/category/suspense"> Suspense Books </a>
-Both attributes above can be used at the same time.
-<a path="/category/suspense" params={{...params, page: 1}}> Suspense Books </a>
-Nested routes
The first route to be matched will be rendered.
-The other elements with a route will not be rendered, however, elements on the same level without a route attribute will render normally.
The router will lookup for one route per dom depth level, this allows you to have nested routing behavior.
-import Nullstack from 'nullstack';
-import Home from './Home';
-
-class Application extends Nullstack {
-
- renderPage() {
- return (
- <section>
- <div route="/page/about"> About Page </div>
- <div route="/page/contact"> Contact Page </div>
- </section>
- )
- }
-
- render({count}) {
- return (
- <main>
- <Home route="/" />
- <Page route="/page/:slug" />
- </main>
- )
- }
-
-}
-
-export default Application;
-Next step
⚔ Learn about two-way bindings.
-Routes and Params
Nullstack has built-in routes, it would make no sense otherwise since web applications are expected to have hyperlinks.
-Any tag can receive a route attribute, be it a component, inner component, or simple HTML tag.
import Nullstack from 'nullstack';
-import Page from './Page';
-
-class Application extends Nullstack {
-
- renderHome() {
- return (
- <section> Home </section>
- )
- }
-
- render({count}) {
- return (
- <main>
- <Home route="/" />
- <Page route="/page" />
- <abbr route="/abbreviations"> Abbreviations </abbr>
- </main>
- )
- }
-
-}
-
-export default Application;
-Links
Links on Nullstack are simple a tags with the href value starting with "/".
<a href="/page/about"> About Page </a>
---💡 On the client side the click event will push history without reloading the page.
-
--✨ You can still assign your own click event to the tag without losing the framework behavior.
-
Params
The params key is an object proxy injected into every client instance.
Each query string param is mapped to this object.
-By default any key you request from this object will return a string.
-If the value is undefined it will return an empty string.
If the value is true or false it will return a boolean instead.
--🐱💻 Bellow an exemple that visits "/books?expanded=true&page=2":
-
import Nullstack from 'nullstack';
-
-class Books extends Nullstack {
-
- async initiate({params}) {
- if(params.expanded) {
- const page = parseInt(params.page) || 1;
- this.books = await this.getBooks({page});
- }
- }
-
-}
-
-export default Books;
-Assigning to a params key will cause a redirect to the route with updated params.
-When you assign to a param, the value will be converted to JSON before being set.
---💡 Redirects work in batches, so there is no performance loss in multiple assignments.
-
import Nullstack from 'nullstack';
-
-class Paginator extends Nullstack {
-
- handleClick({params}) {
- params.filter = '';
- params.page = 1;
- }
-
-}
-
-export default Paginator;
-Assigning an empty string to a param will remove it from the url.
-Dynamic Segments
Part of the route can be an expression started with ":" followed by a param name.
-This value will be matched against any string in the same directory position.
-The value of the string in the URL will be assigned to the context params and functions below this point in the hierarchy will have access to the new key.
---🐱💻 Bellow an example that visits "/category/suspense?page=2":
-
import Nullstack from 'nullstack';
-
-class Books extends Nullstack {
-
- async initiate({params}) {
- const page = parseInt(params.page) || 1;
- const category = params.slug;
- this.books = await this.getBooks({category, page});
- }
-
-}
-
-export default Books;
-import Nullstack from 'nullstack';
-import Books from './Books';
-
-class Application extends Nullstack {
-
- render() {
- <main>
- <Books route="/category/:slug">
- </main>
- }
-
-}
-
-export default Application;
-When a dynamic segment is changed, as for example moving from "/category/suspense" to "/category/comedy", the component will be terminated and a new instance will be created.
-Changing a query param will not re-instantiate the component.
-Children of the component will not be re-instantiated automatically, you can set the same route to the children or do it manually if you desire this behavior.
---💡 The behavior mentioned above solves many of the problems you have to normally deal with manually.
-
Wildcards
Wildcards are routes declared with "*" as the attribute value.
-These routes will match anything if nothing above it matches the requested URL.
-import Nullstack from 'nullstack';
-import Home from './Home';
-
-class Application extends Nullstack {
-
- render({count}) {
- return (
- <main>
- <Home route="/" />
- <div route="*"> Wildcard </div>
- </main>
- )
- }
-
-}
-Wildcards can be prefixed with a segment.
---✨ this is especially useful for engines that can be mounted in your application.
-
import Nullstack from 'nullstack';
-import Home from './Home';
-import BlogEngine from './BlogEngine';
-
-class Application extends Nullstack {
-
- render({count}) {
- return (
- <main>
- <Home route="/" />
- <BlogEngine route="/blog/*" />
- </main>
- )
- }
-
-}
-Router
The router key is an object proxy injected into every client instance.
The router has two keys:
-
-
url
-path
-
The url key returns everything after the domain including the path and the query params as a string.
The path key returns only the path without query params.
--💡 Both keys above automatically remove the trailing slash for convenience.
-
Assigning to url or path will cause a redirect.
import Nullstack from 'nullstack';
-
-class Application extends Nullstack {
-
- prepare({router}) {
- if(router.path == '/') {
- router.path = '/dashboard';
- }
- }
-
-}
---💡 Under the hood
-atags withparamsuse therouter.
Custom Events
Updating router.url or router.path will raise a custom event.
import Nullstack from 'nullstack';
-
-class Analytics extends Nullstack {
-
- hydrate({router}) {
- window.addEventListener(router.event, () => {
- console.log(router.url);
- });
- }
-
-}
-
-export default Analytics;
-Special anchors
Anchor tags accept some convenient special attributes besides the regular href.
You can set the params attribute with an object as the value.
The path will remain the same as the current router path, but the params will be replaced by the new params you specify.
<a params={{page: 1}}> First Page </a>
-If you wish to just update some params and keep the others, you can use the javascript spread operator for that.
-<a params={{...params, page: 1}}> First Page </a>
-You can set the path attribute with a string starting with "/" and no query params.
The params will remain the same, but the path will be updated.
<a path="/category/suspense"> Suspense Books </a>
-Both attributes above can be used at the same time.
-<a path="/category/suspense" params={{...params, page: 1}}> Suspense Books </a>
-Nested routes
The first route to be matched will be rendered.
-The other elements with a route will not be rendered, however, elements on the same level without a route attribute will render normally.
The router will lookup for one route per dom depth level, this allows you to have nested routing behavior.
-import Nullstack from 'nullstack';
-import Home from './Home';
-
-class Application extends Nullstack {
-
- renderPage() {
- return (
- <section>
- <div route="/page/about"> About Page </div>
- <div route="/page/contact"> Contact Page </div>
- </section>
- )
- }
-
- render({count}) {
- return (
- <main>
- <Home route="/" />
- <Page route="/page/:slug" />
- </main>
- )
- }
-
-}
-
-export default Application;
-Next step
⚔ Learn about two-way bindings.
-Nullstack has built-in routes, it would make no sense otherwise since web applications are expected to have hyperlinks.
\nAny tag can receive a route attribute, be it a component, inner component, or simple HTML tag.
import Nullstack from 'nullstack';\nimport Page from './Page';\n\nclass Application extends Nullstack {\n\n renderHome() {\n return (\n <section> Home </section>\n )\n }\n \n render({count}) {\n return (\n <main>\n <Home route=\"/\" />\n <Page route=\"/page\" />\n <abbr route=\"/abbreviations\"> Abbreviations </abbr>\n </main>\n )\n }\n\n}\n\nexport default Application;\nLinks
Links on Nullstack are simple a tags with the href value starting with "/".
<a href=\"/page/about\"> About Page </a>\n\n\n💡 On the client side the click event will push history without reloading the page.
\n
\n\n✨ You can still assign your own click event to the tag without losing the framework behavior.
\n
Params
The params key is an object proxy injected into every client instance.
Each query string param is mapped to this object.
\nBy default any key you request from this object will return a string.
\nIf the value is undefined it will return an empty string.
If the value is true or false it will return a boolean instead.
\n\n🐱💻 Bellow an exemple that visits "/books?expanded=true&page=2":
\n
import Nullstack from 'nullstack';\n\nclass Books extends Nullstack {\n\n async initiate({params}) {\n if(params.expanded) {\n const page = parseInt(params.page) || 1;\n this.books = await this.getBooks({page});\n }\n }\n\n}\n\nexport default Books;\nAssigning to a params key will cause a redirect to the route with updated params.
\nWhen you assign to a param, the value will be converted to JSON before being set.
\n\n\n💡 Redirects work in batches, so there is no performance loss in multiple assignments.
\n
import Nullstack from 'nullstack';\n\nclass Paginator extends Nullstack {\n\n handleClick({params}) {\n params.filter = '';\n params.page = 1;\n }\n\n}\n\nexport default Paginator;\nAssigning an empty string to a param will remove it from the url.
\nDynamic Segments
Part of the route can be an expression started with ":" followed by a param name.
\nThis value will be matched against any string in the same directory position.
\nThe value of the string in the URL will be assigned to the context params and functions below this point in the hierarchy will have access to the new key.
\n\n\n🐱💻 Bellow an example that visits "/category/suspense?page=2":
\n
import Nullstack from 'nullstack';\n\nclass Books extends Nullstack {\n\n async initiate({params}) {\n const page = parseInt(params.page) || 1;\n const category = params.slug;\n this.books = await this.getBooks({category, page});\n }\n\n}\n\nexport default Books;\nimport Nullstack from 'nullstack';\nimport Books from './Books';\n\nclass Application extends Nullstack {\n\n render() {\n <main>\n <Books route=\"/category/:slug\">\n </main>\n }\n\n}\n\nexport default Application;\nWhen a dynamic segment is changed, as for example moving from "/category/suspense" to "/category/comedy", the component will be terminated and a new instance will be created.
\nChanging a query param will not re-instantiate the component.
\nChildren of the component will not be re-instantiated automatically, you can set the same route to the children or do it manually if you desire this behavior.
\n\n\n💡 The behavior mentioned above solves many of the problems you have to normally deal with manually.
\n
Wildcards
Wildcards are routes declared with "*" as the attribute value.
\nThese routes will match anything if nothing above it matches the requested URL.
\nimport Nullstack from 'nullstack';\nimport Home from './Home';\n\nclass Application extends Nullstack {\n\n render({count}) {\n return (\n <main>\n <Home route=\"/\" />\n <div route=\"*\"> Wildcard </div>\n </main>\n )\n }\n\n}\nWildcards can be prefixed with a segment.
\n\n\n✨ this is especially useful for engines that can be mounted in your application.
\n
import Nullstack from 'nullstack';\nimport Home from './Home';\nimport BlogEngine from './BlogEngine';\n\nclass Application extends Nullstack {\n\n render({count}) {\n return (\n <main>\n <Home route=\"/\" />\n <BlogEngine route=\"/blog/*\" />\n </main>\n )\n }\n\n}\nRouter
The router key is an object proxy injected into every client instance.
The router has two keys:
- \n
url\npath\n
The url key returns everything after the domain including the path and the query params as a string.
The path key returns only the path without query params.
\n\n💡 Both keys above automatically remove the trailing slash for convenience.
\n
Assigning to url or path will cause a redirect.
import Nullstack from 'nullstack';\n\nclass Application extends Nullstack {\n\n prepare({router}) {\n if(router.path == '/') {\n router.path = '/dashboard';\n }\n }\n\n}\n\n\n💡 Under the hood
\natags withparamsuse therouter.
Custom Events
Updating router.url or router.path will raise a custom event.
import Nullstack from 'nullstack';\n\nclass Analytics extends Nullstack {\n\n hydrate({router}) {\n window.addEventListener(router.event, () => {\n console.log(router.url);\n });\n }\n\n}\n\nexport default Analytics;\nSpecial anchors
Anchor tags accept some convenient special attributes besides the regular href.
You can set the params attribute with an object as the value.
The path will remain the same as the current router path, but the params will be replaced by the new params you specify.
<a params={{page: 1}}> First Page </a>\nIf you wish to just update some params and keep the others, you can use the javascript spread operator for that.
\n<a params={{...params, page: 1}}> First Page </a>\nYou can set the path attribute with a string starting with "/" and no query params.
The params will remain the same, but the path will be updated.
<a path=\"/category/suspense\"> Suspense Books </a>\nBoth attributes above can be used at the same time.
\n<a path=\"/category/suspense\" params={{...params, page: 1}}> Suspense Books </a>\nNested routes
The first route to be matched will be rendered.
\nThe other elements with a route will not be rendered, however, elements on the same level without a route attribute will render normally.
The router will lookup for one route per dom depth level, this allows you to have nested routing behavior.
\nimport Nullstack from 'nullstack';\nimport Home from './Home';\n\nclass Application extends Nullstack {\n\n renderPage() {\n return (\n <section>\n <div route=\"/page/about\"> About Page </div>\n <div route=\"/page/contact\"> Contact Page </div>\n </section>\n )\n }\n \n render({count}) {\n return (\n <main>\n <Home route=\"/\" />\n <Page route=\"/page/:slug\" />\n </main>\n )\n }\n\n}\n\nexport default Application;\nNext step
⚔ Learn about two-way bindings.
\n","description":"Nullstack has built-in routes, it would make no sense otherwise since web applications are expected to have hyperlinks."},"n-0-0-13":{},"n-0-0-15":{},"n-0-0-16":{"locale":"en-US","i18n":{"nullachan":{"alt":"Nulla-Chan","title":"Nulla-Chan: Nullstack's official waifu"},"links":[{"title":"YouTube","href":"https://www.youtube.com/channel/UCUNPaxoppH3lu6JTrUX78Ww"},{"title":"Twitter","href":"https://twitter.com/nullstackapp"},{"title":"GitHub","href":"https://github.com/nullstack"}]}}}, "page": {"image":"/image-1200x630.png","status":200,"title":"Routes and Params - Nullstack","description":"Nullstack has built-in routes, it would make no sense otherwise since web applications are expected to have hyperlinks."}} \ No newline at end of file diff --git a/docs/server-functions.html b/docs/server-functions.html deleted file mode 100644 index 0e92987a..00000000 --- a/docs/server-functions.html +++ /dev/null @@ -1,200 +0,0 @@ - - - - - -Server Functions
Server functions are specialized microservices that at transpile time are converted into API entry points.
-To flag a function as a server function, you must declare it as static async.
Being a static function means it has no access to the instance scope.
-However, instead of calling the static version from the class, you must invoke it as an instance function.
-Server functions can be called anytime in your code and are not limited to prerender steps.
-import Nullstack from 'nullstack';
-
-class Component extends Nullstack {
-
- static async increment(context) {
- context.count++;
- }
-
- async handleClick() {
- await this.increment();
- }
-
- // ...
-
-}
-
-export default Component;
---✨ Learn more about the server context.
-
Client behavior
When you call a server function from the client, the arguments will be serialized as JSON.
-The arguments will be posted against the automatically generated API and merged with the server context when it reaches the server.
-The return value of the server function will be serialized back to the client and can be seamlessly used as if it were a local function.
-import Nullstack from 'nullstack';
-
-class Component extends Nullstack {
-
- static async increment(context) {
- context.count++;
- return context.count;
- }
-
- async handleClick() {
- this.count = await this.increment();
- }
-
- // ...
-
-}
-
-export default Component;
-Server behavior
Server functions will be used as local functions, simply aliasing the instance call to the class and merging the arguments with the server context.
-Date Convenience
Dates are serialized as UTC in JSON and deserialized back to Date objects.
import Nullstack from 'nullstack';
-
-class Component extends Nullstack {
-
- async initiate() {
- const date = new Date();
- const verified = this.verifyDay({date});
- }
-
- static async verifyDay({date}) {
- return date.getDay() === new Date().getDay();
- }
-
- // ...
-
-}
-
-export default Component;
-Fetch Convenience
fetch is available in both server and client functions for the sake of isomorphy.
import Nullstack from 'nullstack';
-
-class Component extends Nullstack {
-
- // ...
-
- async initiate() {
- const url = 'https://api.github.com/repos/nullstack/nullstack/issues';
- const response = await fetch(url);
- this.issues = await response.json();
- }
-
- // ...
-
-}
-
-export default Component;
-Server only imports
Imported dependencies that are only used inside server functions will be excluded from the client bundle.
-This is useful for both accessing node.js exclusive modules and reducing the client bundle size by preprocessing data like markdown without having to expose the dependency to the end-user.
-import Nullstack from 'nullstack';
-import {readFileSync} from 'fs';
-import {Remarkable} from 'remarkable';
-
-class Application extends Nullstack {
-
- static async getTasks() {
- const readme = readFileSync('README.md', 'utf-8');
- return new Remarkable().render(readme);
- }
-
- // ...
-
-}
-
-export default Application;
-Security
Keep in mind that every server function is similar to an Express route in API and must be coded without depending on view logic for security.
---🔒 Server functions with the name starting with "start" (and optionally followed by an uppercase letter) do not generate an API endpoint to avoid malicious context flooding.
-
import Nullstack from 'nullstack';
-
-class Component extends Nullstack {
-
- static async getCount({request, count}) {
- if(!request.session.user) return 0;
- return count;
- }
-
- // ...
-
-}
-
-export default Component;
---💡 Server functions are not exposed to the client.
-
--✨ Learn more about the NJS file extension.
-
Reserved words
Server function names cannot collide with instance method names from the current class or its parent classes.
-The following words cannot be used in server functions:
--
-
prepare
-initiate
-hydrate
-update
-terminate
-
Server functions named start will not generate an API endpoint and can only be called by other server functions.
Caveats
Automatically generated API endpoints are not meant to be used by 3rd-party apps.
-The URL and implementation may change between versions of Nullstack.
---✨ If you want to build an API, learn more about how to create an API with Nullstack.
-
Next step
⚔ Learn about the context.
-Server Functions
Server functions are specialized microservices that at transpile time are converted into API entry points.
-To flag a function as a server function, you must declare it as static async.
Being a static function means it has no access to the instance scope.
-However, instead of calling the static version from the class, you must invoke it as an instance function.
-Server functions can be called anytime in your code and are not limited to prerender steps.
-import Nullstack from 'nullstack';
-
-class Component extends Nullstack {
-
- static async increment(context) {
- context.count++;
- }
-
- async handleClick() {
- await this.increment();
- }
-
- // ...
-
-}
-
-export default Component;
---✨ Learn more about the server context.
-
Client behavior
When you call a server function from the client, the arguments will be serialized as JSON.
-The arguments will be posted against the automatically generated API and merged with the server context when it reaches the server.
-The return value of the server function will be serialized back to the client and can be seamlessly used as if it were a local function.
-import Nullstack from 'nullstack';
-
-class Component extends Nullstack {
-
- static async increment(context) {
- context.count++;
- return context.count;
- }
-
- async handleClick() {
- this.count = await this.increment();
- }
-
- // ...
-
-}
-
-export default Component;
-Server behavior
Server functions will be used as local functions, simply aliasing the instance call to the class and merging the arguments with the server context.
-Date Convenience
Dates are serialized as UTC in JSON and deserialized back to Date objects.
import Nullstack from 'nullstack';
-
-class Component extends Nullstack {
-
- async initiate() {
- const date = new Date();
- const verified = this.verifyDay({date});
- }
-
- static async verifyDay({date}) {
- return date.getDay() === new Date().getDay();
- }
-
- // ...
-
-}
-
-export default Component;
-Fetch Convenience
fetch is available in both server and client functions for the sake of isomorphy.
import Nullstack from 'nullstack';
-
-class Component extends Nullstack {
-
- // ...
-
- async initiate() {
- const url = 'https://api.github.com/repos/nullstack/nullstack/issues';
- const response = await fetch(url);
- this.issues = await response.json();
- }
-
- // ...
-
-}
-
-export default Component;
-Server only imports
Imported dependencies that are only used inside server functions will be excluded from the client bundle.
-This is useful for both accessing node.js exclusive modules and reducing the client bundle size by preprocessing data like markdown without having to expose the dependency to the end-user.
-import Nullstack from 'nullstack';
-import {readFileSync} from 'fs';
-import {Remarkable} from 'remarkable';
-
-class Application extends Nullstack {
-
- static async getTasks() {
- const readme = readFileSync('README.md', 'utf-8');
- return new Remarkable().render(readme);
- }
-
- // ...
-
-}
-
-export default Application;
-Security
Keep in mind that every server function is similar to an Express route in API and must be coded without depending on view logic for security.
---🔒 Server functions with the name starting with "start" (and optionally followed by an uppercase letter) do not generate an API endpoint to avoid malicious context flooding.
-
import Nullstack from 'nullstack';
-
-class Component extends Nullstack {
-
- static async getCount({request, count}) {
- if(!request.session.user) return 0;
- return count;
- }
-
- // ...
-
-}
-
-export default Component;
---💡 Server functions are not exposed to the client.
-
--✨ Learn more about the NJS file extension.
-
Reserved words
Server function names cannot collide with instance method names from the current class or its parent classes.
-The following words cannot be used in server functions:
--
-
prepare
-initiate
-hydrate
-update
-terminate
-
Server functions named start will not generate an API endpoint and can only be called by other server functions.
Caveats
Automatically generated API endpoints are not meant to be used by 3rd-party apps.
-The URL and implementation may change between versions of Nullstack.
---✨ If you want to build an API, learn more about how to create an API with Nullstack.
-
Next step
⚔ Learn about the context.
-Server functions are specialized microservices that at transpile time are converted into API entry points.
\nTo flag a function as a server function, you must declare it as static async.
Being a static function means it has no access to the instance scope.
\nHowever, instead of calling the static version from the class, you must invoke it as an instance function.
\nServer functions can be called anytime in your code and are not limited to prerender steps.
\nimport Nullstack from 'nullstack';\n\nclass Component extends Nullstack {\n\n static async increment(context) {\n context.count++;\n }\n\n async handleClick() {\n await this.increment();\n }\n\n // ...\n\n}\n\nexport default Component;\n\n\n✨ Learn more about the server context.
\n
Client behavior
When you call a server function from the client, the arguments will be serialized as JSON.
\nThe arguments will be posted against the automatically generated API and merged with the server context when it reaches the server.
\nThe return value of the server function will be serialized back to the client and can be seamlessly used as if it were a local function.
\nimport Nullstack from 'nullstack';\n\nclass Component extends Nullstack {\n\n static async increment(context) {\n context.count++;\n return context.count;\n }\n\n async handleClick() {\n this.count = await this.increment();\n }\n\n // ...\n\n}\n\nexport default Component;\nServer behavior
Server functions will be used as local functions, simply aliasing the instance call to the class and merging the arguments with the server context.
\nDate Convenience
Dates are serialized as UTC in JSON and deserialized back to Date objects.
import Nullstack from 'nullstack';\n\nclass Component extends Nullstack {\n\n async initiate() {\n const date = new Date();\n const verified = this.verifyDay({date});\n }\n\n static async verifyDay({date}) {\n return date.getDay() === new Date().getDay();\n }\n\n // ...\n\n}\n\nexport default Component;\nFetch Convenience
fetch is available in both server and client functions for the sake of isomorphy.
import Nullstack from 'nullstack';\n\nclass Component extends Nullstack {\n\n // ...\n\n async initiate() {\n const url = 'https://api.github.com/repos/nullstack/nullstack/issues';\n const response = await fetch(url);\n this.issues = await response.json();\n }\n\n // ...\n\n}\n\nexport default Component;\nServer only imports
Imported dependencies that are only used inside server functions will be excluded from the client bundle.
\nThis is useful for both accessing node.js exclusive modules and reducing the client bundle size by preprocessing data like markdown without having to expose the dependency to the end-user.
\nimport Nullstack from 'nullstack';\nimport {readFileSync} from 'fs';\nimport {Remarkable} from 'remarkable';\n\nclass Application extends Nullstack {\n\n static async getTasks() {\n const readme = readFileSync('README.md', 'utf-8');\n return new Remarkable().render(readme);\n }\n\n // ...\n\n}\n\nexport default Application;\nSecurity
Keep in mind that every server function is similar to an Express route in API and must be coded without depending on view logic for security.
\n\n\n🔒 Server functions with the name starting with "start" (and optionally followed by an uppercase letter) do not generate an API endpoint to avoid malicious context flooding.
\n
import Nullstack from 'nullstack';\n\nclass Component extends Nullstack {\n\n static async getCount({request, count}) {\n if(!request.session.user) return 0;\n return count;\n }\n\n // ...\n\n}\n\nexport default Component;\n\n\n💡 Server functions are not exposed to the client.
\n
\n\n✨ Learn more about the NJS file extension.
\n
Reserved words
Server function names cannot collide with instance method names from the current class or its parent classes.
\nThe following words cannot be used in server functions:
\n- \n
prepare\ninitiate\nhydrate\nupdate\nterminate\n
Server functions named start will not generate an API endpoint and can only be called by other server functions.
Caveats
Automatically generated API endpoints are not meant to be used by 3rd-party apps.
\nThe URL and implementation may change between versions of Nullstack.
\n\n\n✨ If you want to build an API, learn more about how to create an API with Nullstack.
\n
Next step
⚔ Learn about the context.
\n","description":"Server functions are specialized microservices that at transpile time are converted into API entry points"},"n-0-0-13":{},"n-0-0-15":{},"n-0-0-16":{"locale":"en-US","i18n":{"nullachan":{"alt":"Nulla-Chan","title":"Nulla-Chan: Nullstack's official waifu"},"links":[{"title":"YouTube","href":"https://www.youtube.com/channel/UCUNPaxoppH3lu6JTrUX78Ww"},{"title":"Twitter","href":"https://twitter.com/nullstackapp"},{"title":"GitHub","href":"https://github.com/nullstack"}]}}}, "page": {"image":"/image-1200x630.png","status":200,"title":"Server Functions - Nullstack","description":"Server functions are specialized microservices that at transpile time are converted into API entry points"}} \ No newline at end of file diff --git a/docs/server-request-and-response.html b/docs/server-request-and-response.html deleted file mode 100644 index 63b981ec..00000000 --- a/docs/server-request-and-response.html +++ /dev/null @@ -1,129 +0,0 @@ - - - - - -Server request and response
The server key
The server key is a proxy around the Express instance that runs Nullstack under the hood.
-The server object is present only in the server context.
-The following functions are tunneled back to the Express server:
--
-
get
-post
-put
-patch
-delete
-options
-head
-use
-
--✨ If you wanna know how to make an API with Nullstack, this is the way.
-
import Nullstack from 'nullstack';
-
-class Application extends Nullstack {
-
- static async start({server}) {
- server.get('/api/books', (request, response) => {
- response.json({books: []});
- });
- }
-
- // ...
-
-}
-
-export default Application;
-Other available keys are:
--
-
- port:
integer
- - maximumPayloadSize:
string
- - cors:
object
-
import Nullstack from 'nullstack';
-
-class Application extends Nullstack {
-
- static async start({server}) {
- server.port = 3000;
- server.maximumPayloadSize = '5mb';
- server.cors = {
- origin: 'http://localhost:6969',
- optionsSuccessStatus: 200
- }
- }
-
- // ...
-
-}
-
-export default Application;
-The cors object will be passed as the argument to express cors plugin.
Request and Response
Every server function context is merged with the original request and response objects from Express.
If you raise a response manually it will override the framework's server-side rendering response.
import Nullstack from 'nullstack';
-
-class Application extends Nullstack {
-
- static async getBooks({request, response}) {
- if(!request.session.user) {
- response.status(401).json({unauthorized: true});
- }
- }
-
- // ...
-
-}
-
-export default Application;
-Next step
⚔ Learn about styles.
-Server request and response
The server key
The server key is a proxy around the Express instance that runs Nullstack under the hood.
-The server object is present only in the server context.
-The following functions are tunneled back to the Express server:
--
-
get
-post
-put
-patch
-delete
-options
-head
-use
-
--✨ If you wanna know how to make an API with Nullstack, this is the way.
-
import Nullstack from 'nullstack';
-
-class Application extends Nullstack {
-
- static async start({server}) {
- server.get('/api/books', (request, response) => {
- response.json({books: []});
- });
- }
-
- // ...
-
-}
-
-export default Application;
-Other available keys are:
--
-
- port:
integer
- - maximumPayloadSize:
string
- - cors:
object
-
import Nullstack from 'nullstack';
-
-class Application extends Nullstack {
-
- static async start({server}) {
- server.port = 3000;
- server.maximumPayloadSize = '5mb';
- server.cors = {
- origin: 'http://localhost:6969',
- optionsSuccessStatus: 200
- }
- }
-
- // ...
-
-}
-
-export default Application;
-The cors object will be passed as the argument to express cors plugin.
Request and Response
Every server function context is merged with the original request and response objects from Express.
If you raise a response manually it will override the framework's server-side rendering response.
import Nullstack from 'nullstack';
-
-class Application extends Nullstack {
-
- static async getBooks({request, response}) {
- if(!request.session.user) {
- response.status(401).json({unauthorized: true});
- }
- }
-
- // ...
-
-}
-
-export default Application;
-Next step
⚔ Learn about styles.
-The server key
The server key is a proxy around the Express instance that runs Nullstack under the hood.
\nThe server object is present only in the server context.
\nThe following functions are tunneled back to the Express server:
\n- \n
get\npost\nput\npatch\ndelete\noptions\nhead\nuse\n
\n\n✨ If you wanna know how to make an API with Nullstack, this is the way.
\n
import Nullstack from 'nullstack';\n\nclass Application extends Nullstack {\n\n static async start({server}) {\n server.get('/api/books', (request, response) => {\n response.json({books: []});\n });\n }\n\n // ...\n\n}\n\nexport default Application;\nOther available keys are:
\n- \n
- port:
integer\n - maximumPayloadSize:
string\n - cors:
object\n
import Nullstack from 'nullstack';\n\nclass Application extends Nullstack {\n\n static async start({server}) {\n server.port = 3000;\n server.maximumPayloadSize = '5mb';\n server.cors = {\n origin: 'http://localhost:6969',\n optionsSuccessStatus: 200\n }\n }\n\n // ...\n\n}\n\nexport default Application;\nThe cors object will be passed as the argument to express cors plugin.
Request and Response
Every server function context is merged with the original request and response objects from Express.
If you raise a response manually it will override the framework's server-side rendering response.
import Nullstack from 'nullstack';\n\nclass Application extends Nullstack {\n\n static async getBooks({request, response}) {\n if(!request.session.user) {\n response.status(401).json({unauthorized: true});\n }\n }\n\n // ...\n\n}\n\nexport default Application;\nNext step
⚔ Learn about styles.
\n","description":"The server key is a proxy around the express instance that runs Nullstack under the hood"},"n-0-0-13":{},"n-0-0-15":{},"n-0-0-16":{"locale":"en-US","i18n":{"nullachan":{"alt":"Nulla-Chan","title":"Nulla-Chan: Nullstack's official waifu"},"links":[{"title":"YouTube","href":"https://www.youtube.com/channel/UCUNPaxoppH3lu6JTrUX78Ww"},{"title":"Twitter","href":"https://twitter.com/nullstackapp"},{"title":"GitHub","href":"https://github.com/nullstack"}]}}}, "page": {"image":"/image-1200x630.png","status":200,"title":"Server request and response - Nullstack","description":"The server key is a proxy around the express instance that runs Nullstack under the hood"}} \ No newline at end of file diff --git a/docs/server-side-rendering.html b/docs/server-side-rendering.html deleted file mode 100644 index 6d6cfe5c..00000000 --- a/docs/server-side-rendering.html +++ /dev/null @@ -1,61 +0,0 @@ - - - - - -Server-Side Rendering
Nullstack optimizes SEO and response times out of the box by generating HTML for the route that you enter the application from.
-Server-side rendering is good for SEO since it gives as fast as possible crawlable markup for search engines.
-Nullstack starts the application for the user by first serving HTML of only the requested page with no overhead.
-Before serving the HTML, Nullstack will wait for prepare and initiate of all components of that route to be resolved.
While server-side rendering all server functions run locally without the need to fetch an API, making the process even faster.
-After the document is already painted in the browser, Nullstack loads the javascript client bundle and starts the hydration process.
-No further requests to the server are made to recover the application state during hydration.
-The page head will generate the necessary meta tags for SEO based on the contents of the project and page context keys.
Next step
⚔ Learn about static site generation.
-Server-Side Rendering
Nullstack optimizes SEO and response times out of the box by generating HTML for the route that you enter the application from.
-Server-side rendering is good for SEO since it gives as fast as possible crawlable markup for search engines.
-Nullstack starts the application for the user by first serving HTML of only the requested page with no overhead.
-Before serving the HTML, Nullstack will wait for prepare and initiate of all components of that route to be resolved.
While server-side rendering all server functions run locally without the need to fetch an API, making the process even faster.
-After the document is already painted in the browser, Nullstack loads the javascript client bundle and starts the hydration process.
-No further requests to the server are made to recover the application state during hydration.
-The page head will generate the necessary meta tags for SEO based on the contents of the project and page context keys.
Next step
⚔ Learn about static site generation.
-Nullstack optimizes SEO and response times out of the box by generating HTML for the route that you enter the application from.
\nServer-side rendering is good for SEO since it gives as fast as possible crawlable markup for search engines.
\nNullstack starts the application for the user by first serving HTML of only the requested page with no overhead.
\nBefore serving the HTML, Nullstack will wait for prepare and initiate of all components of that route to be resolved.
While server-side rendering all server functions run locally without the need to fetch an API, making the process even faster.
\nAfter the document is already painted in the browser, Nullstack loads the javascript client bundle and starts the hydration process.
\nNo further requests to the server are made to recover the application state during hydration.
\nThe page head will generate the necessary meta tags for SEO based on the contents of the project and page context keys.
Next step
⚔ Learn about static site generation.
\n","description":"Nullstack optimizes SEO and response times out of the box by generating HTML for the route that you enter the application from"},"n-0-0-13":{},"n-0-0-15":{},"n-0-0-16":{"locale":"en-US","i18n":{"nullachan":{"alt":"Nulla-Chan","title":"Nulla-Chan: Nullstack's official waifu"},"links":[{"title":"YouTube","href":"https://www.youtube.com/channel/UCUNPaxoppH3lu6JTrUX78Ww"},{"title":"Twitter","href":"https://twitter.com/nullstackapp"},{"title":"GitHub","href":"https://github.com/nullstack"}]}}}, "page": {"image":"/image-1200x630.png","status":200,"title":"Server-Side Rendering - Nullstack","description":"Nullstack optimizes SEO and response times out of the box by generating HTML for the route that you enter the application from"}} \ No newline at end of file diff --git a/docs/service-worker-9cdb5778f42a90a83e1427c9316c97d3.js b/docs/service-worker-9cdb5778f42a90a83e1427c9316c97d3.js deleted file mode 100644 index f2d2e47f..00000000 --- a/docs/service-worker-9cdb5778f42a90a83e1427c9316c97d3.js +++ /dev/null @@ -1,234 +0,0 @@ -self.context = { - "environment": { - "client": false, - "server": true, - "development": false, - "production": true, - "static": true, - "key": "9cdb5778f42a90a83e1427c9316c97d3" - }, - "project": { - "type": "website", - "display": "standalone", - "orientation": "portrait", - "scope": "/", - "root": "/", - "favicon": "/favicon-96x96.png", - "icons": { - "72": "/icon-72x72.png", - "96": "/icon-96x96.png", - "128": "/icon-128x128.png", - "144": "/icon-144x144.png", - "152": "/icon-152x152.png", - "180": "/icon-180x180.png", - "192": "/icon-192x192.png", - "384": "/icon-384x384.png", - "512": "/icon-512x512.png" - }, - "disallow": [], - "sitemap": true, - "cdn": "", - "protocol": "https", - "name": "Nullstack", - "domain": "nullstack.app", - "color": "#d22365", - "backgroundColor": "#2d3748" - }, - "settings": {}, - "worker": { - "enabled": true, - "fetching": false, - "preload": [ - "/404", - "/about", - "/application-startup", - "/context-data", - "/context-environment", - "/context-page", - "/context-project", - "/context-secrets", - "/context-settings", - "/context", - "/full-stack-lifecycle", - "/getting-started", - "/how-to-deploy-a-nullstack-application", - "/how-to-use-facebook-pixel-with-nullstack", - "/how-to-use-google-analytics-with-nullstack", - "/how-to-use-mongodb-with-nullstack", - "/instance-self", - "/njs-file-extension", - "/renderable-components", - "/routes-and-params", - "/server-functions", - "/server-request-and-response", - "/server-side-rendering", - "/service-worker", - "/stateful-components", - "/static-site-generation", - "/styles", - "/two-way-bindings", - "/documentation", - "/components", - "/about", - "/contributors", - "/roboto-v20-latin-300.woff2", - "/roboto-v20-latin-500.woff2", - "/crete-round-v9-latin-regular.woff2", - "/nullachan.png" - ], - "headers": {}, - "queues": {} - } -}; - -async function load(event) { - const response = await event.preloadResponse; - if (response) return response; - return await fetch(event.request); -} - -function toAPI(url) { - let [path, query] = url.split('?'); - if(path.indexOf('.') === -1) { - path += '/index.json'; - } - return query ? `${path}?${query}` : path; -} - -async function extractData(response) { - const html = await response.clone().text(); - const instancesLookup = 'window.instances = '; - const instances = html.split("\n").find((line) => line.indexOf(instancesLookup) > -1).split(instancesLookup)[1].slice(0, -1); - const pageLookup = 'window.page = '; - const page = html.split("\n").find((line) => line.indexOf(pageLookup) > -1).split(pageLookup)[1].slice(0, -1); - const json = `{"instances": ${instances}, "page": ${page}}`; - return new Response(json, { - headers: {'Content-Type': 'application/json'} - }); -} - -async function injectData(templateResponse, cachedDataResponse) { - const data = await cachedDataResponse.json(); - const input = await templateResponse.text(); - const output = input.split(`\n`).map((line) => { - if(line.indexOf('Context Service Worker
-
-
- Type:
object
- - Origin: Nullstack Context -
- Availability: server/client -
- readwrite in server context -
- readonly in client context -
It gives you granular control of your PWA behavior.
-worker keys will be used to generate the service worker file and should be set during the application startup.
worker keys are frozen after the application startup.
The following keys are available in the object during the startup:
--
-
- enabled:
boolean
- - preload:
string array(relative paths)
- - headers:
object
-
The enabled key defines if the service worker will be automatically registered by Nullstack.
By default enabled is set to true on production mode and false on development mode.
preload is an array of paths that will be cached when the service worker is installed.
The assets required to start the application will be preloaded automatically, and you should configure only the extra pages you want to have available offline.
-import Nullstack from 'nullstack';
-import path from 'path';
-import {readdirSync} from 'fs';
-
-class Application extends Nullstack {
-
- static async start({worker}) {
- const articles = readdirSync(path.join(__dirname, '..', 'articles'));
- worker.preload = [
- ...articles.map((article) => '/' + article.replace('.md', '')),
- '/nullstack.svg',
- '/documentation',
- '/components'
- ]
- }
-
- // ...
-
-}
-
-export default Application;
---💡 the example above is extracted from this repository and allows the documentation to be fully accessible offline.
-
The following keys are available as readonly in the client context:
--
-
- enabled:
boolean
- - preload:
string array(relative paths)
- - online:
boolean
- - fetching:
boolean
- - responsive:
boolean
- - installation:
BeforeInstallPromptEvent
- - registration:
ServiceWorkerRegistration
- - loading:
object
-
The following keys are available as readwrite in the client context:
--
-
- headers:
object
-
The responsive key determines if the application has all the responses it needs to render the current page.
Nullstack will try to keep your application responsive as long as possible and set the key to false only when there are no ways of retrieving any response from the network or offline according to the fetch strategy for the environment.
The online key will listen for network events and rerender the application when navigator.onLine value changes.
When the application is back online Nullstack will try to make the application responsive again and rerender if necessary.
-import Nullstack from 'nullstack';
-// ...
-
-class Application extends Nullstack {
-
- // ...
-
- render({worker}) {
- if(!worker.responsive) {
- return <OfflineWarning />
- }
- return (
- <main>
- <Home route="/" />
- </main>
- )
- }
-
-}
-You can access the current service worker registration and installation from the worker key to control the flow of your PWA.
The registration key refers to the service worker registration and will be only available once the registration process is complete.
The installation key refers to the deferred installation prompt event and will only be available if the beforeinstallprompt event is triggered.
import Nullstack from 'nullstack';
-
-class PWAInstaller extends Nullstack {
-
- installed = false;
- hidden = false;
-
- async prompt({worker}) {
- try {
- worker.installation.prompt();
- const {outcome} = await worker.installation.userChoice;
- if (outcome === 'accepted') {
- console.log('User accepted the A2HS prompt');
- } else {
- console.log('User dismissed the A2HS prompt');
- }
- } finally {
- this.hidden = true;
- }
- }
-
- render({worker, project}) {
- if(this.hidden) return false;
- if(!worker.installation) return false;
- return (
- <div>
- <img src={project.favicon} />
- <p> Do you want to add {project.name} to your home screen?</p>
- <button onclick={this.prompt}> Install </button>
- <button onclick={{hidden: true}}> Not Now </button>
- </div>
- )
- }
-
-}
-
-export default PWAInstaller;
-Loading Screens
When a server function is called fetching will be set to true until the response is resolved.
When a server function is called a key with the name of the server function invoked will be set to true in the loading key until the response is resolved.
Any key you invoke on the loading object will always return a boolean instead of undefined for consistency.
When the server is emulating the client context for server-side rendering, every key of the loading object will always return false, saving multiple render cycles in performance.
import Nullstack from 'nullstack';
-
-class Page extends Nullstack {
-
- static async save() {
- // ...
- }
-
- async submit() {
- await this.save();
- }
-
- render({worker}) {
- return (
- <form onsubmit={this.save}>
- {worker.fetching &&
- <span> loading... </span>
- }
- <button disabled={worker.loading.save}>
- Save
- </button>
- </form>
- )
- }
-
-}
-
-export default Page;
-Custom headers
You can use the headers key to configure the headers that the worker will use when fetching a server function.
--🔥 Headers will be ignored when a server function is called during the server-side rendering process.
-
import Nullstack from 'nullstack';
-
-class LoginPage extends Nullstack {
-
- // ...
-
- async submit({worker}) {
- // ...
- this.headers['Authorization'] = `Bearer ${token}`;
- // ...
- }
-
- static async authorize({request}) {
- const authorization = request.headers['Authorization'];
- // ...
- }
-
- // ...
-
-}
-
-
-export default LoginPage;
---✨ Learn more about the server request and response
-
Server-side render strategy
-
-
- Requests for different origins will be fetched normally; -
- Requests that are not GET will be fetched normally; -
- Fingerprinted assets will be loaded into cache at installation time; -
- Fingerprinted assets will be loaded from cache first then fallback to the network if needed; -
- Paths with an extension will be retrieved stale and update the cache in the background for subsequent request; -
- Navigation paths will be loaded from the network then fallback to a page in which
worker.responsiveandworker.onlineare set tofalse;
-
Static-site generation strategy
-
-
- Requests for different origins will be fetched normally; -
- Requests that are not GET will be fetched normally; -
- Fingerprinted assets will be loaded into cache at installation time; -
- Fingerprinted assets will be loaded from cache first then fallback to the network if needed; -
- Paths with an extension will be retrieved stale and update the cache in the background for subsequent request; -
- The home page will be loaded network first and then fallback to a cached copy if needed; -
- Navigation paths will instead load only the static API data and merge it with the application template to generate a response. -
- Navigating to a static route will cache only the data of that page; -
- When data is not available in the cache or network it will fallback to a page in which
worker.responsiveandworker.onlineare set tofalse;
-
Custom Strategy
Nullstack will install automatically your service worker if enabled is set to true with the following events:
-
-
install
-activate
-fetch
-
You can override any of those events by creating a service-worker.js in the public folder;
-If any of the keywords above are found Nullstack will inject your function in the service worker code instead of the default.
-For convenience a context key is injected in the service worker self with the following keys:
-
-
worker
-project
-environment
-
function activate(event) {
- event.waitUntil(async function() {
- const cacheNames = await caches.keys();
- const cachesToDelete = cacheNames.filter(cacheName => cacheName !== self.context.environment.key);
- await Promise.all(cachesToDelete.map((cacheName) => caches.delete(cacheName)));
- if (self.registration.navigationPreload) {
- await self.registration.navigationPreload.enable();
- }
- self.clients.claim();
- }());
-}
-
-self.addEventListener('activate', activate);
---💡 The example above is extracted from the generated service worker and uses
-self.context.environment.key