webc

• Allows WebC content inside Declarative Shadow DOM templates #117
  • Adds webc:nobundle feature to opt-out nodes (and children) from bundling.
  • webc:nobundle is implied on Declarative Shadow DOM templates.
• Bug fix for custom transforms as slottable content #118
• Adds a few more tests to the suite for webc:for from @sombriks in #161

Milestone: https://github.com/11ty/webc/milestone/21?closed=1
Full Changelog: https://github.com/11ty/webc/compare/v0.11.2...v0.11.3

• Fixed: Slottable content was accessing the wrong component definition for global data access and webc:setup scripts #152 #154

Milestone: https://github.com/11ty/webc/milestone/20?closed=1
Full Changelog: https://github.com/11ty/webc/compare/v0.11.1...v0.11.2

Regression quick fix:

• Slotted content (in a top level component) should have access to global data without using $data, fixes #152

Full Changelog: https://github.com/11ty/webc/compare/v0.11.0...v0.11.1
Milestone: https://github.com/11ty/webc/milestone/19?closed=1

Milestone: https://github.com/11ty/webc/milestone/18?closed=1
Full Changelog: https://github.com/11ty/webc/compare/v0.10.1...v0.11.0

⚠️ BREAKING ⚠️ This will affect your component code if you relied on global data from inside of component definitions.

Child components will now need to access global data through a top level $data variable instead of as top level variables. This is important to prevent global data leaking into component data and affecting component logic.

This will not affect pages or top-level WebC components (in Eleventy world, these are *.webc files as Eleventy layouts or in as pages in your input folder). This only affects child components (in Eleventy world, this means files in your components folder, e.g. _components/**/*.webc).

• Read more at #151.
• Here’s the commit that was required to upgrade 11ty.dev to WebC v0.11.0.

Sorry to have to make this breaking change, but it’s an important one.

Other fixes in this release:

• Fix for webc:scoped with @keyframes and percentages. #145
• Fix bug with webc:setup feeding Arrays into webc:for #150

• Adds webc.escapeText function
• Adds webc.escapeAttribute function
• Adds webc.filterPublicAttributes function

Docs for the above: https://www.11ty.dev/docs/languages/webc/#extra-data-for-javascript-render-functions

• fix koa link by @sombriks in https://github.com/11ty/webc/pull/142

Milestone: https://github.com/11ty/webc/milestone/17?closed=1
Full Changelog: https://github.com/11ty/webc/compare/v0.10.0...v0.10.1

• webc:for for looping https://www.11ty.dev/docs/languages/webc/#webcfor-loops #28
• webc:elseif and webc:else https://www.11ty.dev/docs/languages/webc/#webcelseif-and-webcelse #136
• Server-only HTML comments <!--- One more dash at the start and end ---> https://www.11ty.dev/docs/languages/webc/#server-only-comments #126
• <script webc:type="js"> (via `webc:is="template") will be treated as HTML-only components and not use the host component tags. #135
• Relax circular dependency errors: instead of throwing an error, we now treat this as a plain HTML tag instead of a WebC component. This makes it easier to override HTML tags (e.g. img.webc returning an <img> without needing using webc:root="override"). #138
• ⚠️ BREAKING (but low-impact): void elements used as components will be ignored in output when the component has child content. (e.g. img.webc returning an <img> without needing using webc:root="override") #107.

Integrations

• New koa WebC integration example added by @sombriks in https://github.com/11ty/webc/pull/134
• Eleventy WebC v0.10.0: https://github.com/11ty/eleventy-plugin-webc/releases/tag/v0.10.0

Milestone: https://github.com/11ty/webc/issues?q=is%3Aclosed+milestone%3A%22WebC+v0.10.0%22
Full Changelog: https://github.com/11ty/webc/compare/v0.9.3...v0.10.0

What's Changed

• Added a WebC component cache
• Shamefully large performance wins via changes to Node vm.createContext

A special thanks to @marvinhagemeister’s Node profiling recommendation!

How fast is it?

From a large sample WebC project:

Before, using WebC v0.9.2:
> Wrote 2621 files in 21.17 seconds (8.1ms each, v2.0.0)

After, using WebC v0.9.3:
> Wrote 2621 files in 7.24 seconds (2.8ms each, v2.0.0)

From 8.1ms per template to 2.8ms per template!

Integrations

• Eleventy WebC v0.9.4 release notes

Full Changelog: https://github.com/11ty/webc/compare/v0.9.2...v0.9.3

• Fixes bug with webc:bucket hoisting (adding to a non-default bucket and then the default bucket should remove code from the non-default bucket)
• Fixes bug with CSS/JS bundle ordering based on component graph. Code should render in order from leaf components to page, where page CSS/JS is rendered last (e.g. this test case https://github.com/11ty/webc/commit/57f0f11b834f35183359f94934a2f6f49a95292f)

Full Changelog: https://github.com/11ty/webc/compare/v0.9.1...v0.9.2

• Adds support for webc:bucket on any tag and it will cascade to all child content (with automatic hoisting when necessary) #122
• Adds support for webc:bucket to be dynamic (e.g. :webc:bucket="myJavaScriptData") #120
• Adds support for globs when passing an Array to WebC.getComponentsMap() #123
• Adds npm: aliasing support to WebC.getComponentsMap() #123

Full Changelog: https://github.com/11ty/webc/compare/v0.9.0...v0.9.1
Milestone: https://github.com/11ty/webc/milestone/14?closed=1

• ⚠️⚠️⚠️ Breaking (risk: 3/5, likely requires changes): You must use webc:root="override" instead of webc:root webc:keep to override the host component tag #112
• ⚠️⚠️ Breaking (risk: 2/5): webc:raw is no longer implied on <template> and <noscript> #105
• ✅ Breaking (risk: 1/5): Using webc:type="js" now has an implied webc:is="template" webc:nokeep to render child content as WebC HTML by default (override with your own webc:is and/or webc:keep). Related Docs #91
• Breaking (risk: 0/5): Removes internal WebC getComponentList method to simplify code base, no longer needed for incremental WebC builds in Eleventy #113

Features

• New <script webc:setup> feature to use arbitrary JavaScript to export data for use in the component #109
• Support new shadowrootmode attribute to opt-out of asset bundling in Declarative Shadow DOM #108
• New @attributes feature to render an attributes object #114
  • New webc.attributes object and webc.renderAttributes method for use in JavaScript Render Functions #104
• New :@ prefix for dynamic properties (e.g. :@dynamic-property) #94 #98
• webc:ignore will completely ignore a node (no processing or output) #110
• Support :host() and :host-context() pseudo classes in webc:scoped by @Gyanreyer in https://github.com/11ty/webc/pull/96

Fixes

• More Node.js global support in webc:type="js" #116, #99, #100
• Fix bug with component rendering mode with leading whitespace on page #115
• Fix for missing helpers in JavaScript Render Functions (webc:type="js" and webc:type="render")

Full Milestone: https://github.com/11ty/webc/milestone/13?closed=1
Full Changelog: https://github.com/11ty/webc/compare/v0.8.0...v0.9.0

• Breaking: attribute-name properties and attributes are now available in data as camel-case: attribute-name in JS data is attributeName. Read more at #71
• Breaking: Removes page level API method for toggling reprocessing mode off (control more granularly with webc:raw or @raw instead). #72
• Docs clarity and bug fixes to new webc:type="js" render function #78
  • Fix console.log inside webc:type="js" #80
  • Fix error with missing props in webc:type="js" #85
  • Fix error requiring string output from webc:type="js" #84
• Bug fix when consuming dynamic attributes from a parent component #80
• Bug fix for webc:imports in components that needed to be relative to the component file. #79

Full milestone: https://github.com/11ty/webc/milestone/12?closed=1
Full Changelog: https://github.com/11ty/webc/compare/v0.7.1...v0.8.0

• @raw as an alias for webc:raw @html #70
• webc:type="js" for simpler custom JavaScript (the successor to webc:type="render") #50 #73 #75
• webc:if for conditional tags #76 #77

Milestone: https://github.com/11ty/webc/milestone/11?closed=1
Full Changelog: https://github.com/11ty/webc/compare/v0.7.0...v0.7.1

Docs are updated on https://www.11ty.dev/docs/languages/webc/ and https://github.com/11ty/webc

Changes to facilitate fixes in @11ty/eleventy-plugin-webc, specifically:

• https://github.com/11ty/eleventy-plugin-webc/issues/17
• https://github.com/11ty/eleventy-plugin-webc/issues/27

This release has no breaking changes in WebC, but will have breaking changes in @11ty/eleventy-plugin-webc and we want to keep version parity between the two.

Full Changelog: https://github.com/11ty/webc/compare/v0.6.2...v0.7.0

Import directly from npm

This example uses @11ty/[email protected].

<syntax-highlight language="js" webc:import="npm:@11ty/eleventy-plugin-syntaxhighlight">
function myFunction() {
  return true;
}
</syntax-highlight>

Uses the component tag name (syntax-highlight) to look for a WebC component at node_modules/@11ty/eleventy-plugin-syntaxhighlight/syntax-highlight.webc and imports it for use.

This works with webc:is too:

<template webc:is="syntax-highlight" language="js" webc:import="npm:@11ty/eleventy-plugin-syntaxhighlight">

• The WebC standalone docs (and Eleventy webc:import docs and Syntax Highlighter plugin docs) have been updated.

Other Changes

• Fix for void elements WebC components that use render functions #67
• chore: copy examples to folder by @manekinekko in https://github.com/11ty/webc/pull/12
• chore: caches node modules in GitHub Actions workflow by @kleinfreund in https://github.com/11ty/webc/pull/43
• Milestone: https://github.com/11ty/webc/milestone/10?closed=1
• Full Changelog: https://github.com/11ty/webc/compare/v0.6.1...v0.6.2

• Fixes #66, allowing you to glob WebC components from inside the node_modules folder directly.
• Milestone https://github.com/11ty/webc/milestone/9?closed=1
  Full Changelog: https://github.com/11ty/webc/compare/v0.6.0...v0.6.1

• Adds npm: prefix to webc:import to import directly from node_modules (e.g. webc:import="npm:@11ty/eleventy-plugin-syntaxhighlighter/syntax-highlight.webc") #63
• Option to add your own webc:import prefix alias to point to any folder (e.g. page.setAlias("key", "./my_custom_folder/");) #63
• Adds @text prop for escaped content #51
• Add support for <link rel="stylesheet" href="" webc:scoped> #53
• Use any npm package in webc:type="render" functions by @RobinCsl in #59 #60
• Access default slot as text in webc:type="render" functions #61
• Fix for missing base64url encoding was on Stackblitz #56
• Fix for extra <html><head><body> elements when using @html #57
• Document page and component rendering modes #54 #64

• Milestone: https://github.com/11ty/webc/milestone/8?closed=1
• Full Changelog: https://github.com/11ty/webc/compare/v0.5.4...v0.6.0
• New Contributor: @RobinCsl

• Fixes issue with HTML raw input passed to transforms (via <template webc:type>) and raw passthrough for <template webc:raw>. #48
• Better error messaging when attempting to reserved word class in JS code #45
• Milestone: https://github.com/11ty/webc/milestone/7?closed=1
• Full Changelog: https://github.com/11ty/webc/compare/v0.5.3...v0.5.4

#44 Reverts strict property usage from #18.

Milestone: https://github.com/11ty/webc/issues?q=is%3Aclosed+milestone%3A0.5.3

Fixes a regression with @html (due to reprocessing #34), resulting in extra <!doctype html><html>… wrapped around return value from @html.

Quick fix edition! Two fixes:

• Attempting to compile an empty string incorrectly threw an error. Empty string templates should compile as empty documents.
• Adds reprocessingMode toggle to WebC class to support Eleventy Layout templates using @html without reprocessing all of the already-processed content.