Skip to content
This repository was archived by the owner on Mar 20, 2024. It is now read-only.

fix: resolve Preboot race conditions #83

Merged
merged 1 commit into from
Aug 2, 2018
Merged

fix: resolve Preboot race conditions #83

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 29 additions & 8 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,24 +46,45 @@ import { AppComponent } from './app.component';
export class AppModule { }
```

The key part here for preboot is to include `PrebootModule.withConfig({ appRoot: 'app-root' })` where the `appRoot`
is the selector(s) to find the root of your application. The options you can pass into `withConfig()` are in the [PrebootOptions](#PrebootOptions) section below. In most cases, however, you will only need to specify the `appRoot`.
The key part here for preboot is to include `PrebootModule.withConfig({ appRoot: 'app-root' })` where the `appRoot` is the selector(s) to find the root of your application. The options you can pass into `withConfig()` are in the [PrebootOptions](#PrebootOptions) section below. In most cases, however, you will only need to specify the `appRoot`.

#### Non-Angular Server Configuration

```
import { getInlinePrebootCode } from 'preboot';
```ts
import { getInlineDefinition, getInlineInvocation } from 'preboot';

const prebootOptions = {}; // see PrebootRecordOptions section below
const inlineCode = getInlinePrebootCode(prebootOptions);
const inlineCodeDefinition = getInlineDefinition(prebootOptions);
const inlineCodeInvocation = getInlineInvocation();

// now insert `inlineCodeDefinition` into a `<script>` tag in `<head>` and
// an `inlineCodeInvocation` copy just after the opening tag of each app root

// now simply insert the inlineCode into the HEAD section of your server view
```

```html
<html>
<head>
<script><%= inlineCodeDefinition %></script>
</head>
<body>
<app1-root>
<script><%= inlineCodeInvocation %></script>
<h2>App1 header</h2>
<div>content</div>
</app1-root>
<app2-root>
<script><%= inlineCodeInvocation %></script>
<h2>App2 header</h2>
<span>content</span>
</app2-root>
</body>
</html>
```

#### Non-Angular Browser Configuration

```
```ts
import { EventReplayer } from 'preboot';

const replayer = new EventReplayer();
Expand Down Expand Up @@ -92,7 +113,7 @@ however where the page continues to change in significant ways. Basically if you
the page after bootstrap then you will see some jank unless you set `replay` to `false` and then trigger replay
yourself once you know that all async events are complete.

To manually trigger replay, simply inject the EventReplayer like this:
To manually trigger replay, inject the EventReplayer like this:

```
import { Injectable } from '@angular/core';
Expand Down
44 changes: 2 additions & 42 deletions src/lib/api/event.recorder.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,20 +6,13 @@
* found in the LICENSE file at https://angular.io/license
*/
import {getMockElement} from '../common/preboot.mocks';
import {createBuffer, createListenHandler, getSelection} from './event.recorder';
import {
EventSelector,
PrebootAppData,
PrebootData,
PrebootSelection,
ServerClientRoot,
} from '../common/preboot.interfaces';
import {createBuffer, getSelection} from './event.recorder';
import {PrebootSelection, ServerClientRoot} from '../common/preboot.interfaces';

describe('UNIT TEST event.recorder', function() {
describe('createBuffer()', function() {
it('should do nothing if serverNode empty', function () {
const root = <ServerClientRoot> {
serverSelector: 'body',
serverNode: undefined
};

Expand All @@ -29,7 +22,6 @@ describe('UNIT TEST event.recorder', function() {

it('should clone the node and insert before', function () {
const root = <ServerClientRoot> {
serverSelector: 'div',
serverNode: getMockElement()
};
const clientNode = {
Expand All @@ -48,7 +40,6 @@ describe('UNIT TEST event.recorder', function() {

it('should add the "ng-non-bindable" attribute to serverNode', function () {
const root = <ServerClientRoot> {
serverSelector: 'div',
serverNode: getMockElement()
};

Expand Down Expand Up @@ -99,35 +90,4 @@ describe('UNIT TEST event.recorder', function() {
expect(actual).toEqual(expected);
});
});


describe('createListenHandler()', function () {
it('should do nothing if not listening', function () {
const prebootData: PrebootData = <PrebootData> {
listening: false
};
const eventSelector: EventSelector = {
selector: '',
events: [''],
preventDefault: true
};
const appData: PrebootAppData = {
root: {
serverSelector: '',
serverNode: undefined
},
events: []
};
const event = {
preventDefault: function () {}
};
const node = <Element>{};

spyOn(event, 'preventDefault');

const handler = createListenHandler(prebootData, eventSelector, appData, node);
handler(event as Event);
expect(event.preventDefault).not.toHaveBeenCalled();
});
});
});
Loading