Done-autorender NPM

done-autorender

Automatically renders a template, either to the <html> or <body> elements.

Install

Install with NPM and use with StealJS:

npm install done-autorender --save

Use

done-autorender enables you to use a Stache template as your application entry-point (the main). done-autorender will wait for your page to be fully loaded (including all dependencies) and then will insert the template into the <head> and <body>. For example:

index.stache

<html>
<head>
  <title>My Site</title>
</head>
<body>
  <can-import from="~/main.css"/>
  <can-import from="~/routes"/>
  <can-import from="~/state" export-as="viewModel"/>

  {{#eq page "home"}}

    <can-dynamic-import from="~/home/">
      {{#if isResolved}}
        <home-page></home-page>
      {{/if}}
    </can-dynamic-import>

  {{/eq}}
</body>
</html>

index.html

<script src="node_modules/steal/steal.js"
	main="app/index.stache!done-autorender"></script>

Then load index.html in a browser. After all dependencies are loaded your index.stache will be rendered and inserted into the page.

No Zone option

If you do not use SSR but still want to use done-autorender to bootstrap your application you can use the no-zone module:

<script src="node_modules/steal/steal.js"
	main="app/index.stache!done-autorender/no-zone"></script>

API

ViewModel

Each done-autorender application is backed by a View Model (such as a DefineMap) that represents the state of the entire application.

To import this View Model into your application use a can-import tag like so:

<can-import from="app/state" export-as="viewModel" />

This tells done-autorender that the module app/state is the ViewModel.

Debugging

In development mode, can-zone/debug is enabled to provide debugging information in the case where the Zone times out and the app is never attached to the page.

You can control the timeout by setting the data-autorender-timeout attribute on the steal script tag (note that data- is optional here) like so:

<script src="./node_modules/steal/steal.js"
	data-autorender-timeout="1000"></script>

The timeout is specified in milliseconds; in the above example it is 1 second. By default the zone will timeout after 5000 milliseconds (5 seconds).

After the Zone has timed out the console will print out stack traces of code that failed to complete. Use these stack traces to figure out what caused reattachment to fail and fix anything that can be fixed (by, for example, using Zone.ignore). These information looks like:

debug stack traces

Break on timeout

Additionally you can choose to have a debugger; breakpoint that is hit after the Zone times out. This allows you to more easily figure out which code is still running and see if something can be done about it.

Enable this by setting the data-autorender-debug-break option on the steal script tag like so:

<script src="./node_modules/steal/steal.js"
	data-autorender-debug-break></script>

This is a boolean attribute and doesn't need a value. Instead of logging stack traces you will get a breakpoint from which you can look back in the call stack and inspect the reason why the code continued to run past the timeout.

break on timeout

can-view-model

If you install can-view-model you can use it to access the Application ViewModel like so:

var canViewModel = require("can-view-model");

var appVM = canViewModel(document.documentElement);

Keeping elements in the DOM

By default done-autorender removes all elements from the <head> and <body> and replaces them with the elements from the template. This is to facilitate use with done-ssr which will have duplicated content.

Some times, especially if not using done-ssr, you might want to keep some elements that are in your HTML but not your stache template. Use the data-keep property and done-autorender will leave them alone:

<html>
<head>
  <meta name="some-prop" content="some-value" data-keep>
</head>
</html>

StealJS CanJS

can-child-nodes can-log can-namespace can-reflect can-route can-stache can-stache-ast can-stache-bindings can-symbol can-view-import can-view-model can-view-scope can-zone full-url steal-config-utils steal-stache

@everything-registry/sub-chunk-1501 place-my-order done-worker-autorender donejs-typeahead

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago