v0.6.0

The browser can fetch the next page before the reader clicks, and CSS can react
to state the document still cannot read.

Both packages move together: @transclude/core and @transclude/create are
0.6.0.

npm install @transclude/core@latest

Before you upgrade

An element with a boolean in <script state> now has ElementInternals.
That is where custom states live, so it is attached for any element that has one
to reflect. Two things follow.

Reading element.internals as a way to ask "is this a form control" now answers
differently. constructor.formAssociated is the question you meant, and it has
not changed.

Calling host.attachInternals() yourself inside an element's <script> block
now throws, because the framework already did. Read host.internals instead.

Neither applies to an element whose state is only numbers or strings, and
nothing else in this release changes what an existing project does.

New

speculate: true writes speculation rules into every page. Every link here
is a document request, and this lets the browser pay for the next one early. No
JavaScript of the framework's is involved, and a browser that does not support
it ignores the block.

export default {
  speculate: true,
};

The split is the part worth knowing, and the build decides it. A page written to
a file has no loader left to run, so the browser may run it early. Every route
the server still renders may only be fetched. Its loader may read a cookie,
count a view or hand out a token. Endpoints are in neither.

{
  "prerender": [{ "where": { "or": [{ "href_matches": "/about" }] }, "eagerness": "moderate" }],
  "prefetch":  [{ "where": { "or": [{ "href_matches": "/notes" }] }, "eagerness": "moderate" }]
}

eagerness is moderate by default, which waits for a hover. exclude takes
patterns as they are emitted, so a route /docs/:path{.+} is excluded as
/docs/*. With csp: true the block is hashed along with everything else the
page inlines, and needs no policy of its own.

A boolean state field is a custom state. State is deliberately not in the
document, which had left CSS no way to see it at all.

<script state>
  export default {
    hot: false,
  };
</script>

<style>
  :scope:state(hot) output {
    color: #b4232c;
  }
</style>

Booleans only: a custom state is a name and not a value. It lands with the
render rather than with the assignment, so await element.updateComplete before
asserting on it. Nothing is reflected on the server, because a state field
always starts at the default its block declares.

A new project turns off one editor setting. npm create @transclude writes
.vscode/settings.json with html.validate.scripts: false. A .html file here
holds script blocks that are separate modules, and the editor's built-in HTML
support reads them as one. An element declaring both <script properties> and
<script state> was reported as having two default exports, on a file that is
correct.

An existing project adds that file by hand. Nothing is lost by it.
npm run check and the language server in the package's editor/ directory
read these files the way the compiler does.

Also

command and commandfor open a <dialog> with no script at all, including
the CSS that makes it animate. That is the platform's own invoker rather than
anything here. It is on
recipes because writing a click handler
instead is the common mistake.

transclude.dev runs speculation now, so the
documentation demonstrates what it documents.

Full documentation at transclude.dev.

A note on the version

Below 1.0, a minor may break something. This one can, in one narrow place.
An element with a boolean state field that also reaches for attachInternals,
or reads internals to decide something. The section at the top says what to
do.

Full changelog: v0.5.0...v0.6.0