diff --git a/packages/cli/src/utils/getLowdefyYaml.test.js b/packages/cli/src/utils/getLowdefyYaml.test.js index 671e62540..67663c9a1 100644 --- a/packages/cli/src/utils/getLowdefyYaml.test.js +++ b/packages/cli/src/utils/getLowdefyYaml.test.js @@ -121,7 +121,7 @@ test('No version specified', async () => { return ` pages: - id: page1 - type: Context + type: Box `; } return null; diff --git a/packages/docs/actions/Reset.yaml b/packages/docs/actions/Reset.yaml index 6a1316493..06302cc65 100644 --- a/packages/docs/actions/Reset.yaml +++ b/packages/docs/actions/Reset.yaml @@ -25,7 +25,7 @@ _ref: description: | The `Reset` actions resets a context to the state it was in just after the `onInit` event was executed. This clears the user's inputs. - > The `Reset` action resets the state to the state after the `onInit` event was executed, and the `onMount` events is not executed after the reset happens. This might cause unexpected behavior if you used an `onInitAsync`, `onMount` or `onMountAsync` event to initialize the state. + > The `Reset` action resets the state to the state after the `onInit` event was executed, and the `onMount` events are not executed after the reset happens. This might cause unexpected behavior if you used an `onInitAsync`, `onMount` or `onMountAsync` event to initialize the state. params: | The `Reset` action does not take any parameters. examples: | diff --git a/packages/docs/blocks/all_icons.yaml b/packages/docs/blocks/all_icons.yaml index 149c01e09..181e24c8f 100644 --- a/packages/docs/blocks/all_icons.yaml +++ b/packages/docs/blocks/all_icons.yaml @@ -397,7 +397,7 @@ - { label: 'GoogleCircleFilled', value: 'GoogleCircleFilled' } - { label: 'GoogleOutlined', value: 'GoogleOutlined' } - { label: 'GooglePlusCircleFilled', value: 'GooglePlusCircleFilled' } -- { label: 'GoogleAiOutlinePlus', value: 'GoogleAiOutlinePlus' } +- { label: 'AiOutlineGooglePlus', value: 'AiOutlineGooglePlus' } - { label: 'GooglePlusSquareFilled', value: 'GooglePlusSquareFilled' } - { label: 'GoogleSquareFilled', value: 'GoogleSquareFilled' } - { label: 'GroupOutlined', value: 'GroupOutlined' } diff --git a/packages/docs/concepts/blocks.yaml b/packages/docs/concepts/blocks.yaml index 5f7ab3c5a..69bbb6482 100644 --- a/packages/docs/concepts/blocks.yaml +++ b/packages/docs/concepts/blocks.yaml @@ -98,7 +98,7 @@ _ref: url: https://blocks-cdn.lowdefy.com/v3.10.1/blocks-amcharts/meta/AmChartsXY.json pages: - id: example_dashboard - type: Context + type: Box blocks: - id: basic_chart type: AmChartsXY @@ -165,7 +165,7 @@ _ref: # Block loading - Blocks will only start rendering when the `onInit` event has completed its actions. The `onMount` event on blocks will render blocks with loading active. By default, some blocks will change behavior while it is in loading. For example, input blocks will be disabled during loading. The loading behavior of blocks can be controlled using the `loading` block property. Setting `loading` to `true` on a container and list block, will result in rendering all child blocks with loading active. + Blocks will only start rendering when the `onInit` event has completed its actions. The `onMount` event on blocks will render blocks loading active. By default, some blocks will change behavior while it is in loading. For example, input blocks will be disabled during loading. The loading behavior of blocks can be controlled using the `loading` block property. Setting `loading` to `true` on a container and list block, will result in rendering all child blocks with loading active. Often it is useful te render a skeleton of blocks instead of the blocks' default loading behavior. When block definitions are provided to the `skeleton` property on a block, this `skeleton` definition will be rendered when loading is active. Any block types from [`@lowdefy/blocks-basic`](https://www.npmjs.com/package/@lowdefy/blocks-basic) and [`@lowdefy/blocks-loaders`](https://www.npmjs.com/package/@lowdefy/blocks-loaders) can be used as the skeleton definition, including sub-blocks. @@ -174,7 +174,7 @@ _ref: ```yaml pages: - id: page_one - type: Context + type: Box blocks: # ... - id: paragraph_one diff --git a/packages/docs/concepts/events-and-actions.yaml b/packages/docs/concepts/events-and-actions.yaml index 41f21c795..cc890f06e 100644 --- a/packages/docs/concepts/events-and-actions.yaml +++ b/packages/docs/concepts/events-and-actions.yaml @@ -184,13 +184,13 @@ _ref: # Page initialization events - The first blocks on a page, usually a [`container`](/container) type block, can define `onInit` and `onInitAsync` events. All blocks on pages has `onMount` and `onMountAsync` events. These events can be used to initialize the page or blocks. + The first blocks on a page, usually a [`container`](/container) type block, can define `onInit` and `onInitAsync` events. All blocks have `onMount` and `onMountAsync` events, that can be used to initialize the page or blocks. The `onInit` event is triggered the first time a page is loaded. This event blocks page render, in other words, the page __will__ remain in a loading state, rendering only the progress bar, until all the actions have completed execution. It can be used to set up [`state`](/context-and-state). Actions that take a long time to execute, like `Request`, should be used sparingly here for a better user experience. The `onInitAsync` event is triggered the first time a page loaded, but does not block page render. In other words, the page __will not__ remain in a loading state until all the actions have completed execution. This is a good place to execute non-blocking tasks or requests that might take longer to execute. - The `onMount` event is triggered every time a block is mounted to a page, for example if a user left a page, and returns to it. This event can be used on any block on a page, and renders blocks in their loading state. It can be used to execute actions that should be run each time a block is loaded, like checking if an id is present in the [url query parameters](/_url_query), or fetching data using a [`Request`](/Request) action. + The `onMount` event is triggered every time a block is rendered on a page. This event can be used on any block, and causes the block and it's children to render in their loading state. It typically executes actions that should be run each time a block is loaded, like checking if an id is present in the [url query parameters](/_url_query), or fetching data for [`Selector`](/Selector) options using a [`Request`](/Request) action. The `onMountAsync` event is triggered every time a block is mounted, but does not render the block in loading. diff --git a/packages/docs/concepts/lowdefy-schema.yaml b/packages/docs/concepts/lowdefy-schema.yaml index e1f96a370..716d08c81 100644 --- a/packages/docs/concepts/lowdefy-schema.yaml +++ b/packages/docs/concepts/lowdefy-schema.yaml @@ -44,8 +44,7 @@ _ref: - `basePath: string`: Set the base path to serve the Lowdefy application from. This will route all pages under `https://example.com//` instead of the default `https://example.com/`. The basePath value must start with "/". - `homePageId: string`: The pageId of the page that should be loaded when a user loads the app without a pageId in the url route. This is the page that is loaded when you navigate to `yourdomain.com`. - - `experimental_initPageId: string`: The pageId of the page that should be loaded when app is initialized. User is then redirected to requeted page. You can use `onInit` / `onInitAsync` / `onMount` / `onMountAsync` events to fetch and prepare global variables for other parts of the app. - # TODO: can experimental_initPageId be removed here? + - id: alert1 type: Alert properties: diff --git a/packages/docs/users/login-and-logout.yaml b/packages/docs/users/login-and-logout.yaml index d1ef985fe..e85e08a02 100644 --- a/packages/docs/users/login-and-logout.yaml +++ b/packages/docs/users/login-and-logout.yaml @@ -41,11 +41,11 @@ _ref: The `Login` action can be used to update the `user` object, for example to update the user profile after it has been edited, or to make sure the user token is still valid before editing or creating a record in a database. #### Examples - # TODO: is onMount a good idea here + ###### A login page that redirects users in the onMount event: ```yaml id: login - type: Context + type: Box events: onMount: # Redirect to "page1" if user is already logged in. diff --git a/packages/engine/src/getContext.js b/packages/engine/src/getContext.js index a815358a7..78ff824bc 100644 --- a/packages/engine/src/getContext.js +++ b/packages/engine/src/getContext.js @@ -95,7 +95,7 @@ function getContext({ config, lowdefy, development = false }) { }; _internal.runOnInit = async (progress) => { progress(); - if (!_internal.State.initialized && !_internal.onInitDone) { + if (!_internal.onInitDone) { await _internal.RootBlocks.areas.root.blocks[0].triggerEvent({ name: 'onInit', progress, @@ -105,7 +105,7 @@ function getContext({ config, lowdefy, development = false }) { } }; _internal.runOnInitAsync = async (progress) => { - if (!_internal.State.initialized && !_internal.onInitAsyncDone) { + if (_internal.onInitDone && !_internal.onInitAsyncDone) { await _internal.RootBlocks.areas.root.blocks[0].triggerEvent({ name: 'onInitAsync', progress,