diff --git a/test/enhance.test.mjs b/test/enhance.test.mjs
index 64e18ab..13e065f 100644
--- a/test/enhance.test.mjs
+++ b/test/enhance.test.mjs
@@ -21,6 +21,7 @@ import MyExternalScript from './fixtures/templates/my-external-script.mjs'
import MyInstanceID from './fixtures/templates/my-instance-id.mjs'
import MyContextParent from './fixtures/templates/my-context-parent.mjs'
import MyContextChild from './fixtures/templates/my-context-child.mjs'
+import MySomething from './fixtures/templates/my-something.mjs'
function Head() {
return `
@@ -77,7 +78,7 @@ test('expand template', t => {
t.end()
})
-test('Passing state through multiple levels', t=> {
+test('Passing state through multiple levels', t => {
const html = enhance({
elements: {
'my-pre-page': MyPrePage,
@@ -111,7 +112,7 @@ test('Passing state through multiple levels', t=> {
t.end()
})
-test('should render as div tag with slot name', t=> {
+test('should render as div tag with slot name', t => {
const html = enhance({
elements: {
'my-multiples': MyMultiples
@@ -152,19 +153,19 @@ test('should render as div tag with slot name', t=> {
t.end()
})
-test('should not duplicate slotted elements', t=> {
- const html = enhance({
+test('should not duplicate slotted elements', t => {
+ const html = enhance({
elements: {
'my-outline': MyOutline
}
- })
+ })
- const actual = html`
+ const actual = html`
${Head()}
things
`
- const expected = `
+ const expected = `
@@ -185,7 +186,7 @@ ${Head()}
t.end()
})
-test('fill named slot', t=> {
+test('fill named slot', t => {
const html = enhance({
elements: {
'my-paragraph': MyParagraph
@@ -217,7 +218,7 @@ ${Head()}
t.end()
})
-test('should not render default content in unnamed slots', t=> {
+test('should not render default content in unnamed slots', t => {
const html = enhance({
elements: {
'my-unnamed': MyUnnamed
@@ -245,7 +246,7 @@ test('should not render default content in unnamed slots', t=> {
t.end()
})
-test('add authored children to unnamed slot', t=> {
+test('add authored children to unnamed slot', t => {
const html = enhance({
elements: {
'my-content': MyContent
@@ -276,7 +277,7 @@ test('add authored children to unnamed slot', t=> {
t.end()
})
-test('pass attributes as state', t=> {
+test('pass attributes as state', t => {
const html = enhance({
elements: {
'my-link': MyLink
@@ -323,7 +324,7 @@ test('pass attribute array values correctly', t => {
'my-list': MyList
}
})
- const things = [{ title: 'one' },{ title: 'two' },{ title: 'three' }]
+ const things = [{ title: 'one' }, { title: 'two' }, { title: 'three' }]
const actual = html`
${Head()}
@@ -365,7 +366,7 @@ test('pass attribute array values correctly', t => {
})
-test('should update deeply nested slots', t=> {
+test('should update deeply nested slots', t => {
const html = enhance({
elements: {
'my-content': MyContent
@@ -413,14 +414,14 @@ test('should update deeply nested slots', t=> {
t.end()
})
-test('fill nested rendered slots', t=> {
+test('fill nested rendered slots', t => {
const html = enhance({
elements: {
'my-list-container': MyListContainer,
'my-list': MyList
}
})
- const items = [{ title: 'one' },{ title: 'two' },{ title: 'three' }]
+ const items = [{ title: 'one' }, { title: 'two' }, { title: 'three' }]
const actual = html`
${Head()}
@@ -479,7 +480,7 @@ test('fill nested rendered slots', t=> {
t.end()
})
-test('should allow supplying custom head tag', t=> {
+test('should allow supplying custom head tag', t => {
const html = enhance({
elements: {
'my-counter': MyCounter
@@ -621,8 +622,8 @@ test('should run style transforms', t => {
'my-transform-style': MyTransformStyle
},
styleTransforms: [
- function ({ attrs, raw, tagName, context }) {
- if (attrs.find(i=>i.name==="scope")?.value==="global"&&context==="template") return ''
+ function({ attrs, raw, tagName, context }) {
+ if (attrs.find(i => i.name === "scope")?.value === "global" && context === "template") return ''
return `
${raw}
/*
@@ -688,9 +689,9 @@ test('should not add duplicated style tags to head', t => {
'my-transform-style': MyTransformStyle,
},
styleTransforms: [
- function ({ attrs, raw, tagName, context }) {
+ function({ attrs, raw, tagName, context }) {
// if tagged as global only add to the head
- if (attrs.find(i=>i.name==="scope")?.value==="global"&&context==="template") return ''
+ if (attrs.find(i => i.name === "scope")?.value === "global" && context === "template") return ''
return `
${raw}
@@ -818,7 +819,7 @@ test('should add multiple external scripts', t => {
t.end()
})
-test('should support unnamed slot without whitespace', t=> {
+test('should support unnamed slot without whitespace', t => {
const html = enhance({
elements: {
'my-unnamed': MyUnnamed
@@ -846,7 +847,7 @@ test('should support unnamed slot without whitespace', t=> {
t.end()
})
-test('should support nested custom elements with nested slots', t=> {
+test('should support nested custom elements with nested slots', t => {
const html = enhance({
elements: {
'my-heading': MyHeading,
@@ -976,3 +977,62 @@ test('should supply context', t => {
t.end()
})
+
+test('Deduplicate scripts and styles when possible', t => {
+ t.plan(2)
+ const html = enhance({
+ elements: {
+ 'my-something': MySomething,
+ }
+ })
+ const actualNoDuplicates = html`
+ ${Head()}
+
+
+ `
+ const expectedNoDuplicates = `
+
+
+
+
+
+
+
+
+
+
+
+
+ `
+ t.equal(
+ strip(actualNoDuplicates),
+ strip(expectedNoDuplicates),
+ 'Adds all script and style variations'
+ )
+
+ const actualWithDuplicates = html`
+ ${Head()}
+
+
+ `
+ const expectedWithDuplicates = `
+
+
+
+
+
+
+
+
+
+
+
+ `
+ t.equal(
+ strip(actualWithDuplicates),
+ strip(expectedWithDuplicates),
+ 'Deduplicates styles and scripts'
+ )
+ t.end()
+
+})
diff --git a/test/fixtures/templates/my-something.mjs b/test/fixtures/templates/my-something.mjs
new file mode 100644
index 0000000..d887a80
--- /dev/null
+++ b/test/fixtures/templates/my-something.mjs
@@ -0,0 +1,13 @@
+export default function MySomething({ html, state }) {
+ const { attrs, context } = state
+ const { message } = attrs
+ context.message = message
+
+ return html`
+
+
+
+ `
+}