diff --git a/.github/workflows/cla.yml b/.github/workflows/cla.yml
new file mode 100644
index 0000000..5612162
--- /dev/null
+++ b/.github/workflows/cla.yml
@@ -0,0 +1,30 @@
+name: "CLA Assistant"
+on:
+ issue_comment:
+ types: [created]
+ pull_request_target:
+ types: [opened,closed,synchronize]
+
+permissions:
+ actions: write
+ contents: write
+ pull-requests: write
+ statuses: write
+
+jobs:
+ CLAAssistant:
+ runs-on: ubuntu-latest
+ steps:
+ - name: "CLA Assistant"
+ if: (github.event.comment.body == 'recheck' || github.event.comment.body == 'I have read the CLA Document and I hereby sign the CLA') || github.event_name == 'pull_request_target'
+ uses: contributor-assistant/github-action@v2.4.0
+ env:
+ GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+ PERSONAL_ACCESS_TOKEN: ${{ secrets.PERSONAL_ACCESS_TOKEN }}
+ with:
+ path-to-signatures: 'signatures/v1/cla.json'
+ path-to-document: 'https://github.com/enhance-dev/.github/blob/main/CLA.md'
+ branch: 'main'
+ allowlist: brianleroux,colepeters,kristoferjoseph,macdonst,ryanbethel,ryanblock,tbeseda
+ remote-organization-name: enhance-dev
+ remote-repository-name: .github
diff --git a/README.md b/README.md
index cecbda4..bb8a9cc 100644
--- a/README.md
+++ b/README.md
@@ -213,21 +213,6 @@ function MyTransformScript({ html }) {
console.log(html``)
```
-### `bodyContent`
-Enhance SSR outputs an entire valid HTML page but you can pass `bodyContent: true` to get the content of the body element. This can be useful for when you want to isolate output HTML to only the Custom Element you are authoring.
-
-```javaScript
-const html = enhance({
- bodyContent: true,
- elements: {
- 'my-paragraph': MyParagraph,
- }
-})
-const output = html`
-
- `
-```
-
### `context`
There are times you will need to pass state to nested child custom elements. To avoid the tedium of passing attributes through multiple levels of nested elements Enhance SSR supplies a `context` object to add state to.
@@ -283,5 +268,46 @@ export default function MyInstanceID({ html, state }) {
```
+### `bodyContent`
+Enhance SSR outputs an entire valid HTML page but you can pass `bodyContent: true` to get just the content of the `` element. This can be useful for when you want to isolate the HTML output to just the Custom Element(s) you are authoring.
+
+```javaScript
+const html = enhance({
+ bodyContent: true,
+ elements: {
+ 'my-paragraph': MyParagraph,
+ }
+})
+const output = html`
+
+ `
+```
+
+### Integration with ``, ``, and `` elements
+
+Enhance SSR will intelligently merge its rendered ``, ``, and `` elements with any that you provide to it (unless you choose to use the `bodyContent: true` option).
+
+For example:
+
+```js
+const html = enhance({
+ elements: {
+ 'my-content': MyContent,
+ }
+})
+
+html`
+
+
+
+ My Website
+
+
+
+
+
+`
+```
> P.S. Enhance works really well with [Begin](https://begin.com).
+
diff --git a/index.mjs b/index.mjs
index 5c00a4d..91012f8 100644
--- a/index.mjs
+++ b/index.mjs
@@ -265,12 +265,29 @@ function fillSlots(node, template) {
const children = nodeChildren.length
? nodeChildren
: [ ...slot.childNodes ]
+ const wrappedChildren = children
+ .filter(child => child.nodeName === '#text'
+ ? child.value.trim().length
+ : true
+ )
+ .map(child => {
+ return child.nodeName === '#text'
+ ? {
+ nodeName: 'span',
+ tagName: 'span',
+ attrs: [
+ { name: 'slot', value: ''}
+ ],
+ childNodes: [child]
+ }
+ : child
+ })
const slotParentChildNodes = slot.parentNode.childNodes
slotParentChildNodes.splice(
slotParentChildNodes
.indexOf(slot),
1,
- ...children
+ ...wrappedChildren
)
})
diff --git a/package-lock.json b/package-lock.json
index 5689f89..74ec42d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "@enhance/ssr",
- "version": "4.0.1",
+ "version": "4.0.2-next.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "@enhance/ssr",
- "version": "4.0.1",
+ "version": "4.0.2-next.0",
"license": "Apache-2.0",
"dependencies": {
"@begin/parse5": "^0.0.4",
diff --git a/package.json b/package.json
index 79b01c6..b1576b5 100644
--- a/package.json
+++ b/package.json
@@ -8,14 +8,14 @@
"type": "module",
"main": "index.mjs",
"scripts": {
- "test": "tape-es ./test/enhance.test.mjs | tap-arc"
+ "test": "tape ./test/enhance.test.mjs | tap-arc"
},
"keywords": [],
"author": "kj ",
"license": "Apache-2.0",
"devDependencies": {
- "tap-arc": "^1.2.2",
- "tape-es": "^1.2.17"
+ "tape": "^5.7.5",
+ "tap-arc": "^1.2.2"
},
"dependencies": {
"@begin/parse5": "^0.0.4",
diff --git a/test/enhance.test.mjs b/test/enhance.test.mjs
index 941cc09..e63339c 100644
--- a/test/enhance.test.mjs
+++ b/test/enhance.test.mjs
@@ -67,7 +67,7 @@ test('default content in unnamed slot', t => {
`
const expected = `
-
+
`
t.equal(
@@ -115,7 +115,7 @@ test('should replace default content in unnamed slot', t => {
`
const expected = `
-
+
`
t.equal(
@@ -304,12 +304,14 @@ test('add authored children to unnamed slot', t => {
const actual = html`
Custom title
+ Just text
`
const expected = `
My Content
Custom title
+ Just text
`
@@ -883,7 +885,7 @@ test('should support nested custom elements with nested slots', t => {
- My Heading
+ My Heading
@@ -997,9 +999,9 @@ ${Head()}
-first
-second
-first again
+ first
+ second
+ first again
`
@@ -1092,7 +1094,7 @@ test('multiple slots with unnamed slot first', t => {
`
const expected = `
- unnamed slotslot One
+ unnamed slotslot One
`
t.equal(