v0.3.0

CHANGELOG.md

@@ -1,3 +1,9 @@
+# 0.3.0
+
+- **feat:** `wsPath` is now optional
+- **refactor:** `stateManager` -> `sessionManager`
+- **docs:** config
+
 # 0.2.13
 
 - **fix:** tabs height

docs/README.md

@@ -6,11 +6,13 @@ LaranaJS is a powerfull fullstack web-development framework.
 
 ## [How to](./how-to/)
 
+- [Preview](./how-to/README.md)
 - [Quick start](./how-to/quickstart.md)
 - [File structure](./how-to/file-structure.md)
-- [Config](./how-to/config.md)
 - [Pages](./how-to/pages.md)
 - [Routing](./how-to/routing.md)
+- [Config](./how-to/config.md)
+- [Subsystems](./how-to/subsystems.md)
 - [Components](./how-to/components.md)
 - [UIKit](./ui-how-to/kit.md)
 - [Styles](./how-to/styles.md)
@@ -25,24 +27,32 @@ LaranaJS is a powerfull fullstack web-development framework.
 
 ## [Tooling](./tooling/)
 
+- [Preview](./tooling/README.md)
 - [Clirana](./tooling/clirana.md)
 - [Ligma](./tooling/ligma.md)
 - [Schemer](./tooling/schemer.md)
 
 ## [Testing](./testing/)
 
+- [Preview](./testing/README.md)
 - [e2e](./testing/e2e.md)
 - [screenshots](./testing/sreenshots.md)
 
-## [Extensions](./extensions/)
+## [Subsystems](./subsystems/)
 
-- [Rendering](./extensions/rendering.md)
+- [Preview](./subsystems/README.md)
+- [Renderer](./subsystems/renderer.md)
+- [SessionManager](./subsystems/session-manager.md)
+- [Networker](./subsystems/networker.md)
+- [Router](./subsystems/router.md)
 
 ## [Architecture](./architecture/)
 
+- [Preview](./architecture/README.md)
 - [Modules](./architecture/modules.md)
 - [Microservices](./architecture/microservices.md)
 
 ## [misc](./misc/)
 
+- [Preview](./misc/README.md)
 - [FAQ](./misc/faq.md)

docs/architecture/README.md

@@ -0,0 +1,8 @@
+# Architecture
+
+TODO
+
+## Table of contents
+
+- [Modules](./modules.md)
+- [Microservices](./microservices.md)

docs/code-style/README.md

@@ -0,0 +1,3 @@
+# Code style
+
+TODO

docs/how-to/README.md

@@ -0,0 +1,22 @@
+# How to
+
+TODO
+
+## Table of contents
+
+- [Quick start](./quickstart.md)
+- [File structure](./file-structure.md)
+- [Pages](./pages.md)
+- [Routing](./routing.md)
+- [Config](./config.md)
+- [Components](./components.md)
+- [UIKit](./ui-how-to/kit.md)
+- [Styles](./styles.md)
+- [Animations](./animations.md)
+- [Hooks](./hooks.md)
+- [State](./state.md)
+- [Sessions](./sessions.md)
+- [Storage](./storage.md)
+- [Events](./events.md)
+- [Figures](./figures.md)
+- [Deploy](./deploy.md)

docs/how-to/components.md

@@ -1,3 +1,5 @@
 # Components
 
 TODO
+
+> Do not implement business logic in components. Use services!

docs/how-to/config.md

@@ -1,3 +1,175 @@
 # Config
 
-LaranaJS is a modular framework. It means that you can replace some of its parts if needed.
+By default app config lies in `src/config.js`. Here is the minimal example:
+
+```js
+const { defineConfig } = require('larana-js')
+
+const config = defineConfig({})
+
+module.exports = { config }
+
+```
+
+[In the next step](./app-modules.md) we will discuss including this config to your app, but now let's take a look at options.
+
+## options
+
+### `debug`
+
+**Type:** `boolean`  
+**Default:** `false`
+
+Is your app in debug mode. Enables `debugOptions` and also add a `DEBUG` overlay to your screen, so you don't forget to disable it before deploying.
+
+Also client files are hot reloaded only when debug is enabled.
+
+### `debugOptions`
+
+**Type:** `object`
+
+It is an object with debug options:
+
+#### `renderOutline`
+
+**Type:** `boolean`  
+**Default:** `false`
+
+If `true`, components will have an outline — a `1px` border with default color set to `rgba(255, 0, 0, 0.4)`. 
+
+> [Components](./components.md) can have custom outline. All you need is to pass `outlineColor` and `outlineWidth` options to a constructor.
+
+#### `renderPaddings`
+
+**Type:** `boolean`  
+**Default:** `false`
+
+If `true`, app will render paddings with `rgba(255, 255, 0, 0.3)` color.
+
+> [Components](./components.md) can have custom padding color. All you need is to pass `paddingColor` option to a constructor.
+
+#### `renderGaps`
+
+**Type:** `boolean`  
+**Default:** `false`
+
+If `true`, app will render gaps with `rgba(255, 0, 255, 0.3)` color.
+
+> [Components](./components.md) can have custom gap color. All you need is to pass `gapColor` option to a constructor.
+
+#### `renderCursor`
+
+**Type:** `boolean`  
+**Default:** `false`
+
+Should the app render a circle on the current mouse position.
+
+#### `logMessages`
+
+**Type:** `boolean`  
+**Default:** `false`
+
+Should the app log every message to console.
+
+### `port`
+
+**Type:** `number`  
+**Default:** `1610`
+
+Port on which your app will be served.
+
+### `host`
+
+**Type:** `string`  
+**Default:** `http://localhost`
+
+Host on which 
+
+### `wsPath`
+
+**Type:** `string`|`null`  
+**Default:** `null`
+
+WebSocket endpoint. If not set, will use app's default.
+
+### `maxFPS`
+
+**Type:** `number`  
+**Default:** `30`
+
+> In development
+
+### `maxBandwidth`
+
+**Type:** `number`  
+**Default:** `10 * 1024` (10 KB)
+
+> In development
+
+### `sessionLifetime`
+
+**Type:** `number`  
+**Default:** `5 * 60 * 1000` (5 minutes)
+
+> In development
+
+### `storePreviousRender`
+
+**Type:** `boolean`  
+**Default:** `true`
+
+Wheter the app should store previous rendered image or not. It is used to compute diff image and reduce package size.
+
+If `true`, the app will use more memory.
+
+If `false`, the app will use more CPU power.
+
+> `ServerRenderer` specific option.  
+> More info here: [Renderer](../app-modules/renderer.md)
+
+### `initialW`
+
+**Type:** `number`  
+**Default:** `512`
+
+Width of initialRoot.
+
+> More info here: [Life cycle](./life-cycle.md)
+
+### `initialH`
+
+**Type:** `number`  
+**Default:** `512`
+
+Height of initialRoot.
+
+> More info here: [Life cycle](./life-cycle.md)
+
+### `defaultTheme`
+
+**Type:** `string`  
+**Default:** `'dark'`
+
+Default UI theme.
+
+> More info here: [Styles](./styles.md)
+
+### `defaultLang`
+
+**Type:** `string`  
+**Default:** `'en'`
+
+Default session language.
+
+### `staticDir`
+
+**Type:** `string`|`null`  
+**Default:** `null`
+
+Directory with static files.
+
+> More info here: [Static files](./static.md).
+
+## Next step
+
+Now we are ready for the [subsystems](./subsystems.md).

docs/how-to/file-structure.md

@@ -10,6 +10,7 @@ Your initial file structure will be something like this:
 		- `home-page.js`
 		- `404-page.js`
 		- `index.js`
+	- `services` — a directory for your business logic.
 	- `static` — a directory for [static files](./static.md)
 		- `larana.svg`
 	- `styles` — a directory for [styles](./styles.md)
@@ -31,16 +32,19 @@ If your project is bigger than a few files, it is recomended to separete your co
 		- `account`
 			- `components`
 			- `pages`
+			- `services`
 			- `routes.js`
 			- `index.js`
 		- `auth`
 			- `components`
 			- `pages`
+			- `services`
 			- `routes.js`
 			- `index.js`
 		- `cart`
 			- `components`
 			- `pages`
+			- `services`
 			- `routes.js`
 			- `index.js`
 	- `routes.js`

docs/how-to/pages.md

@@ -29,7 +29,10 @@ class ArticlePage extends Page {
 
 	styles() {
 		// will be pasted inside of <head>
-		return '<link rel="stylesheet" href="/static/style.css"/>'
+		return [
+			'<link rel="stylesheet" href="/static/style.css"/>',
+			'<style>body { background-color: #333; }</style>',
+		].join('\n')
 	}
 
 	content() {
@@ -61,7 +64,7 @@ class ArticlePage extends Page {
 			throbber: 0,
 		})
 
-		myAPI.fetchArticle(route.params.id).then((r) => {
+		myAPI.fetchArticle(route.params.slug).then((r) => {
 			setState({ article: r.data })
 		})
 	}
@@ -85,6 +88,9 @@ class ArticlePage extends Page {
 		const { state } = this.useState()
 
 		return layout({
+			style: {
+				direction: w < 1280 ? 'column' : 'row',
+			},
 			children: [
 				state.article ? text({ value: article.title }) : throbber({ model: 'throbber' }),
 			],

docs/how-to/quickstart.md

@@ -8,7 +8,7 @@ Run the following comand to create a project:
 npm init larana-js my-project
 ```
 
-You will be prompted a few questions and then your project will be ready.
+> You will be prompted a few questions and then your project will be ready.
 
 ### Initialization options
 

docs/how-to/routing.md

@@ -8,6 +8,7 @@ If you initialized your project with `npm init larana-js` command, you should ha
 
 ```js
 const {
+	HomePage,
 	ArticlePage,
 	NotFoundPage,
 } = require('./pages')
@@ -60,12 +61,12 @@ Here is an example of route:
 
 ```js
 const route = {
-    path: '/articles/:slug/',
-    name: 'article',
-    page: [class ArticlePage extends Page],
-    url: '/articles/how-to/?section=comments',
-    params: { slug: 'how-to' },
-    queryParams: { section: 'comments' },
+	path: '/articles/:slug/',
+	name: 'article',
+	page: [class ArticlePage extends Page],
+	url: '/articles/how-to/?section=comments',
+	params: { slug: 'how-to' },
+	queryParams: { section: 'comments' },
 }
 ```
 

docs/how-to/subsystems.md

@@ -0,0 +1,4 @@
+# Subsystem
+
+LaranaJS is a modular framework. It means that you can replace some of its parts if needed.
+

docs/misc/README.md

@@ -0,0 +1,7 @@
+# Misc
+
+TODO
+
+## Table of contents
+
+- [F.A.Q.](./faq.md)

docs/subsystems/README.md

@@ -0,0 +1,10 @@
+# Subsystems
+
+TODO
+
+## Table of contents
+
+- [Renderer](./renderer.md)
+- [SessionManager](./session-manager.md)
+- [Networker](./networker.md)
+- [Router](./router.md)