From 58317924040a8810a91cc59222d7a93a07759c4e Mon Sep 17 00:00:00 2001 From: Jiu Fong Lam <> Date: Sun, 10 Mar 2024 20:34:13 +0800 Subject: [PATCH 01/10] Add width and height option to Pic and Annotation Add log warning for missing width and height --- docs/userGuide/syntax/pictures.md | 6 ++-- packages/core/src/html/NodeProcessor.ts | 6 +++- packages/vue-components/src/Pic.vue | 28 +++++++++++++++---- .../src/annotations/Annotate.vue | 8 ++++++ 4 files changed, 38 insertions(+), 10 deletions(-) diff --git a/docs/userGuide/syntax/pictures.md b/docs/userGuide/syntax/pictures.md index 22ed0fddaf..2c851ee017 100644 --- a/docs/userGuide/syntax/pictures.md +++ b/docs/userGuide/syntax/pictures.md @@ -5,7 +5,7 @@ html - + MarkBind Logo @@ -22,7 +22,7 @@ width | `string` | | The width of the image in pixels.
If both width and heig
```html - + MarkBind Logo ``` @@ -30,7 +30,7 @@ width | `string` | | The width of the image in pixels.
If both width and heig
- + MarkBind Logo
diff --git a/packages/core/src/html/NodeProcessor.ts b/packages/core/src/html/NodeProcessor.ts index b933a28b42..1067d4254a 100644 --- a/packages/core/src/html/NodeProcessor.ts +++ b/packages/core/src/html/NodeProcessor.ts @@ -265,13 +265,17 @@ export class NodeProcessor { */ if (!_.has(node.attribs, 'v-pre')) { node.attribs['v-pre'] = ''; } break; + case 'pic': + if ( _.has(node.attribs, "lazy") && !_.has(node.attribs, "width") && !_.has(node.attribs, "height")) { + logger.warn(`Neither width nor height is specified at ${context.variables.code}, lazy loading might cause layout shifts `); + }; + break; default: break; } } catch (error) { logger.error(error); } - return context; } diff --git a/packages/vue-components/src/Pic.vue b/packages/vue-components/src/Pic.vue index 2d17bba5a4..ec2a263f9f 100644 --- a/packages/vue-components/src/Pic.vue +++ b/packages/vue-components/src/Pic.vue @@ -5,8 +5,10 @@ :src="src" :alt="alt" :width="computedWidth" + :height="computedHeight" + :loading= "computedLoadType" class="img-fluid rounded" - @load.once="computeWidth" + @load.once="computeWidthAndHeight" /> @@ -35,6 +37,10 @@ export default { type: String, default: '', }, + lazy: { + type: Boolean, + default: false, + }, addClass: { type: String, default: '', @@ -53,21 +59,31 @@ export default { } return this.widthFromHeight; }, + computedHeight() { + return this.heightFromWidth; + }, + computedLoadType() { + return this.lazy ? 'lazy' : 'eager'; + } }, data() { return { widthFromHeight: '', + heightFromWidth: '', }; }, methods: { - computeWidth() { + computeWidthAndHeight() { + const renderedImg = this.$refs.pic; + const imgHeight = renderedImg.naturalHeight; + const imgWidth = renderedImg.naturalWidth; + const aspectRatio = imgWidth / imgHeight; if (!this.hasWidth && this.hasHeight) { - const renderedImg = this.$refs.pic; - const imgHeight = renderedImg.naturalHeight; - const imgWidth = renderedImg.naturalWidth; - const aspectRatio = imgWidth / imgHeight; this.widthFromHeight = Math.round(toNumber(this.height) * aspectRatio).toString(); } + if (this.hasWidth) { + this.heightFromWidth = Math.round(toNumber(this.width) / aspectRatio).toString(); + } }, }, }; diff --git a/packages/vue-components/src/annotations/Annotate.vue b/packages/vue-components/src/annotations/Annotate.vue index 62235637c6..f8cd6ca7a7 100644 --- a/packages/vue-components/src/annotations/Annotate.vue +++ b/packages/vue-components/src/annotations/Annotate.vue @@ -5,6 +5,7 @@ :src="src" :alt="alt" :width="computedWidth" + :loading="computedLoadType" class="annotate-image" @load.once="getWidth" /> @@ -35,6 +36,10 @@ export default { type: String, default: '', }, + lazy: { + type: Boolean, + default: false, + }, addClass: { type: String, default: '', @@ -53,6 +58,9 @@ export default { } return this.widthFromHeight; }, + computedLoadType() { + return this.lazy ? 'lazy' : 'eager'; + } }, data() { return { From 4498597ee44ae7a90a2885df849340eb7bba1eaf Mon Sep 17 00:00:00 2001 From: Jiu Fong Lam <> Date: Sun, 10 Mar 2024 22:12:43 +0800 Subject: [PATCH 02/10] Improve code quality on lazy loading --- docs/userGuide/syntax/annotations.md | 5 ++-- docs/userGuide/syntax/pictures.md | 1 + packages/core/src/html/NodeProcessor.ts | 12 ++++++--- packages/vue-components/src/Pic.vue | 12 ++++----- .../src/annotations/Annotate.vue | 26 ++++++++++++------- 5 files changed, 35 insertions(+), 21 deletions(-) diff --git a/docs/userGuide/syntax/annotations.md b/docs/userGuide/syntax/annotations.md index f2364998bf..deafa1a6d8 100644 --- a/docs/userGuide/syntax/annotations.md +++ b/docs/userGuide/syntax/annotations.md @@ -14,7 +14,7 @@ The x and y coordinates of each Annotate Point are relative to the image and are html - + @@ -191,11 +191,12 @@ Here we showcase some use cases of the Annotate feature. This is effectively the same as the options used for the [picture](#pictures) component. | Name | Type | Default | Description | -| ------ | --------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +|--------| --------- | ------- |-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | alt | `string` | | **This must be specified.**
The alternative text of the image. | | src | `string` | | **This must be specified.**
The URL of the image.
The URL can be specified as absolute or relative references. More info in: _[Intra-Site Links]({{baseUrl}}/userGuide/formattingContents.html#intraSiteLinks)_ | | height | `string` |`''`| The height of the image in pixels. | | width | `string` |`''`| The width of the image in pixels.
If both width and height are specified, width takes priority over height. It is to maintain the image's aspect ratio. | +| lazy | `boolean` | false | The `` component lazy loads if this attribute is specified.
**Either the height or width should be specified to avoid layout shifts while lazy loading images.** |
diff --git a/docs/userGuide/syntax/pictures.md b/docs/userGuide/syntax/pictures.md index 2c851ee017..9546dd927e 100644 --- a/docs/userGuide/syntax/pictures.md +++ b/docs/userGuide/syntax/pictures.md @@ -18,6 +18,7 @@ alt | `string` | | **This must be specified.**
The alternative text of the im height | `string` | | The height of the image in pixels. src | `string` | | **This must be specified.**
The URL of the image.
The URL can be specified as absolute or relative references. More info in: _[Intra-Site Links]({{baseUrl}}/userGuide/formattingContents.html#intraSiteLinks)_ width | `string` | | The width of the image in pixels.
If both width and height are specified, width takes priority over height. It is to maintain the image's aspect ratio. +lazy | `boolean` | false | The `` component lazy loads if this attribute is specified.
**Either the height or width should be specified to avoid layout shifts while lazy loading images.**
diff --git a/packages/core/src/html/NodeProcessor.ts b/packages/core/src/html/NodeProcessor.ts index 1067d4254a..35f96616b2 100644 --- a/packages/core/src/html/NodeProcessor.ts +++ b/packages/core/src/html/NodeProcessor.ts @@ -175,7 +175,6 @@ export class NodeProcessor { // log warnings for conflicting attributes if (_.has(warnConflictingAtributesMap, node.name)) { warnConflictingAtributesMap[node.name](node); } - switch (node.name) { case 'frontmatter': this._processFrontmatter(node, context); @@ -266,9 +265,14 @@ export class NodeProcessor { if (!_.has(node.attribs, 'v-pre')) { node.attribs['v-pre'] = ''; } break; case 'pic': - if ( _.has(node.attribs, "lazy") && !_.has(node.attribs, "width") && !_.has(node.attribs, "height")) { - logger.warn(`Neither width nor height is specified at ${context.variables.code}, lazy loading might cause layout shifts `); - }; + case 'annotate': + if (_.has(node.attribs, 'lazy') + && !(_.has(node.attribs, 'width') || _.has(node.attribs, 'height'))) { + logger.warn('Both width and height are not specified at the code below, ' + + 'lazy loading might cause shifting in page layouts. ' + + 'To ensure proper functioning of lazy loading, please specify either one or both.' + + `${context.variables.code}`); + } break; default: break; diff --git a/packages/vue-components/src/Pic.vue b/packages/vue-components/src/Pic.vue index ec2a263f9f..5218410180 100644 --- a/packages/vue-components/src/Pic.vue +++ b/packages/vue-components/src/Pic.vue @@ -6,7 +6,7 @@ :alt="alt" :width="computedWidth" :height="computedHeight" - :loading= "computedLoadType" + :loading="computedLoadType" class="img-fluid rounded" @load.once="computeWidthAndHeight" /> @@ -64,7 +64,7 @@ export default { }, computedLoadType() { return this.lazy ? 'lazy' : 'eager'; - } + }, }, data() { return { @@ -78,11 +78,11 @@ export default { const imgHeight = renderedImg.naturalHeight; const imgWidth = renderedImg.naturalWidth; const aspectRatio = imgWidth / imgHeight; - if (!this.hasWidth && this.hasHeight) { - this.widthFromHeight = Math.round(toNumber(this.height) * aspectRatio).toString(); - } - if (this.hasWidth) { + if (this.hasWidth) { // if width is present, overwrite the height (if any) to maintain aspect ratio this.heightFromWidth = Math.round(toNumber(this.width) / aspectRatio).toString(); + } else if (this.hasHeight) { + this.widthFromHeight = Math.round(toNumber(this.height) * aspectRatio).toString(); + this.heightFromWidth = this.height; } }, }, diff --git a/packages/vue-components/src/annotations/Annotate.vue b/packages/vue-components/src/annotations/Annotate.vue index f8cd6ca7a7..528b560d3c 100644 --- a/packages/vue-components/src/annotations/Annotate.vue +++ b/packages/vue-components/src/annotations/Annotate.vue @@ -5,9 +5,10 @@ :src="src" :alt="alt" :width="computedWidth" + :height="computedHeight" :loading="computedLoadType" class="annotate-image" - @load.once="getWidth" + @load.once="computeWidthAndHeight" />
@@ -58,23 +59,30 @@ export default { } return this.widthFromHeight; }, + computedHeight() { + return this.heightFromWidth; + }, computedLoadType() { return this.lazy ? 'lazy' : 'eager'; - } + }, }, data() { return { widthFromHeight: '', + heightFromWidth: '', }; }, methods: { - getWidth() { - if (!this.hasWidth && this.hasHeight) { - const renderedImg = this.$refs.pic; - const imgHeight = renderedImg.naturalHeight; - const imgWidth = renderedImg.naturalWidth; - const imageAspectRatio = imgWidth / imgHeight; - this.widthFromHeight = Math.round(toNumber(this.height) * imageAspectRatio); + computeWidthAndHeight() { + const renderedImg = this.$refs.pic; + const imgHeight = renderedImg.naturalHeight; + const imgWidth = renderedImg.naturalWidth; + const aspectRatio = imgWidth / imgHeight; + if (this.hasWidth) { // if width is present, overwrite the height (if any) to maintain aspect ratio + this.heightFromWidth = Math.round(toNumber(this.width) / aspectRatio).toString(); + } else if (this.hasHeight) { + this.widthFromHeight = Math.round(toNumber(this.height) * aspectRatio).toString(); + this.heightFromWidth = this.height; } }, }, From aca23e6bea82a4fc46b3ed06da6fc97b828e4104 Mon Sep 17 00:00:00 2001 From: Jiu Fong Lam <> Date: Sun, 10 Mar 2024 22:34:13 +0800 Subject: [PATCH 03/10] Update test --- .../src/__tests__/__snapshots__/Annotation.spec.js.snap | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/vue-components/src/__tests__/__snapshots__/Annotation.spec.js.snap b/packages/vue-components/src/__tests__/__snapshots__/Annotation.spec.js.snap index 318783c4b1..8b8bfe2693 100644 --- a/packages/vue-components/src/__tests__/__snapshots__/Annotation.spec.js.snap +++ b/packages/vue-components/src/__tests__/__snapshots__/Annotation.spec.js.snap @@ -6,6 +6,8 @@ exports[`Annotation with customised annotation points 1`] = ` > @@ -92,6 +94,8 @@ exports[`Annotation with different visual annotation points 1`] = ` > @@ -380,6 +384,8 @@ exports[`Annotation with markdown in header, content and label 1`] = ` > From a99c6b9ec5d17976547cd11088616ebd563a45eb Mon Sep 17 00:00:00 2001 From: Jiu Fong Lam <> Date: Tue, 12 Mar 2024 21:43:51 +0800 Subject: [PATCH 04/10] Update unit tests for lazy loading --- .../test_site/expected/testList.html | 6 +- .../expected/testList.page-vue-render.js | 2 +- .../core/test/unit/html/NodeProcessor.test.ts | 67 +++++++++++++++++++ 3 files changed, 71 insertions(+), 4 deletions(-) diff --git a/packages/cli/test/functional/test_site/expected/testList.html b/packages/cli/test/functional/test_site/expected/testList.html index 4278834e68..2228bf1502 100644 --- a/packages/cli/test/functional/test_site/expected/testList.html +++ b/packages/cli/test/functional/test_site/expected/testList.html @@ -378,10 +378,10 @@

Testing Site-Nav
Sub-item B1
-
  • +
  • Sub-item B2
    • -
  • +
  • Sub-item B3 diff --git a/packages/cli/test/functional/test_site/expected/testList.page-vue-render.js b/packages/cli/test/functional/test_site/expected/testList.page-vue-render.js index ac30178ad0..50b1abadb4 100644 --- a/packages/cli/test/functional/test_site/expected/testList.page-vue-render.js +++ b/packages/cli/test/functional/test_site/expected/testList.page-vue-render.js @@ -62,7 +62,7 @@ with(this){return _c('ul',{staticStyle:{"list-style-type":"none","padding-inline with(this){return _c('ol',[_c('li',[_v("Testing with various attributes")])])} },function anonymous( ) { -with(this){return _c('ul',{staticStyle:{"list-style-type":"none","padding-inline-start":"0px"}},[_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"glyphicon glyphicon-education text-primary",staticStyle:{"font-size":"20px","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Item A")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticStyle:{"padding-bottom":"0.3em","padding-top":"0.3em","font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"}},[_c('img',{staticClass:"text-warning",staticStyle:{"width":"200px","height":"100px","display":"inline-block"},attrs:{"src":"/test_site/images/deer.jpg","alt":"Icon"}}),_v("​​")]),_c('div',[_v("Item B\n"),_c('ul',{staticStyle:{"list-style-type":"none","padding-inline-start":"0px"}},[_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"fas fa-file-code",staticStyle:{"font-size":"30px","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Sub-item B1")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"fas fa-file-code text-success",staticStyle:{"font-size":"30px","min-width":"16px","line-height":"unset","margin-inline-end":"2rem","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Sub-item B2")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"fas fa-file-code text-success",staticStyle:{"font-size":"30px","min-width":"16px","line-height":"unset","margin-inline-end":"2rem","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Sub-item B3\n"),_c('ul',{staticStyle:{"list-style-type":"none","padding-inline-start":"0px"}},[_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticStyle:{"padding-bottom":"0.3em","padding-top":"0.3em","font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"}},[_c('img',{staticStyle:{"width":"50px","height":"50px","display":"inline-block"},attrs:{"src":"/test_site/images/deer.jpg","alt":"Icon"}}),_v("​​")]),_c('div',[_v("Sub-sub-item B3.1")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticStyle:{"padding-bottom":"0.3em","padding-top":"0.3em","font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"}},[_c('img',{staticStyle:{"width":"50px","height":"50px","display":"inline-block"},attrs:{"src":"/test_site/images/deer.jpg","alt":"Icon"}}),_v("​​")]),_c('div',[_v("Sub-sub-item B3.2\n"),_c('ul',[_c('li',{attrs:{"i-class":"text-danger"}},[_v("Sub-sub-sub-item B3.2.1")])])])])])])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"fas fa-file-code text-success",staticStyle:{"font-size":"30px","min-width":"16px","line-height":"unset","margin-inline-end":"1rem","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Sub-item B4")])])])])])])} +with(this){return _c('ul',{staticStyle:{"list-style-type":"none","padding-inline-start":"0px"}},[_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"glyphicon glyphicon-education text-primary",staticStyle:{"font-size":"20px","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Item A")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticStyle:{"padding-bottom":"0.3em","padding-top":"0.3em","font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"}},[_c('img',{staticClass:"text-warning",staticStyle:{"width":"200px","height":"100px","display":"inline-block"},attrs:{"src":"/test_site/images/deer.jpg","alt":"Icon"}}),_v("​​")]),_c('div',[_v("Item B\n"),_c('ul',{staticStyle:{"list-style-type":"none","padding-inline-start":"0px"}},[_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"fas fa-file-code",staticStyle:{"font-size":"30px","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Sub-item B1")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"},attrs:{"i-spacing":"2rem"}},[_c('span',{staticClass:"fas fa-file-code text-success",staticStyle:{"font-size":"30px","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Sub-item B2")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"fas fa-file-code text-success",staticStyle:{"font-size":"30px","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Sub-item B3\n"),_c('ul',{staticStyle:{"list-style-type":"none","padding-inline-start":"0px"}},[_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticStyle:{"padding-bottom":"0.3em","padding-top":"0.3em","font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"}},[_c('img',{staticStyle:{"width":"50px","height":"50px","display":"inline-block"},attrs:{"src":"/test_site/images/deer.jpg","alt":"Icon"}}),_v("​​")]),_c('div',[_v("Sub-sub-item B3.1")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticStyle:{"padding-bottom":"0.3em","padding-top":"0.3em","font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"}},[_c('img',{staticStyle:{"width":"50px","height":"50px","display":"inline-block"},attrs:{"src":"/test_site/images/deer.jpg","alt":"Icon"}}),_v("​​")]),_c('div',[_v("Sub-sub-item B3.2\n"),_c('ul',[_c('li',{attrs:{"i-class":"text-danger"}},[_v("Sub-sub-sub-item B3.2.1")])])])])])])]),_v(" "),_c('li',{staticStyle:{"display":"flex"},attrs:{"i-spacing":"1rem"}},[_c('span',{staticClass:"fas fa-file-code text-success",staticStyle:{"font-size":"30px","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Sub-item B4")])])])])])])} },function anonymous( ) { with(this){return _c('ol',[_c('li',[_v("Mixing basic and customized lists")])])} diff --git a/packages/core/test/unit/html/NodeProcessor.test.ts b/packages/core/test/unit/html/NodeProcessor.test.ts index 371d1069f7..f825762645 100644 --- a/packages/core/test/unit/html/NodeProcessor.test.ts +++ b/packages/core/test/unit/html/NodeProcessor.test.ts @@ -2,6 +2,7 @@ import path from 'path'; import cheerio from 'cheerio'; import htmlparser from 'htmlparser2'; import * as testData from './NodeProcessor.data'; +import * as logger from '../../../src/utils/logger'; import { Context } from '../../../src/html/Context'; import { shiftSlotNodeDeeper, transformOldSlotSyntax } from '../../../src/html/vueSlotSyntaxProcessor'; import { getNewDefaultNodeProcessor } from '../utils/utils'; @@ -122,6 +123,72 @@ test('processNode processes dropdown with header slot taking priority over heade testData.PROCESS_DROPDOWN_HEADER_SLOT_TAKES_PRIORITY_EXPECTED); }); +test('processNode does not log warning when lazy pic has width or height', + () => { + const nodeProcessor = getNewDefaultNodeProcessor(); + + const testCode = ''; + const testNode = parseHTML(testCode)[0] as MbNode; + + const consoleSpy = jest.spyOn(logger, 'warn'); + + nodeProcessor.processNode(testNode, new Context(path.resolve(''), [], { code: testCode }, {})); + + const logMessage = consoleSpy.mock.calls[0]; + expect(logMessage).toEqual(undefined); + }); + +test('processNode does not log warning when lazy annotate has width or height', + () => { + const nodeProcessor = getNewDefaultNodeProcessor(); + + const testCode = ''; + const testNode = parseHTML(testCode)[0] as MbNode; + + const consoleSpy = jest.spyOn(logger, 'warn'); + + nodeProcessor.processNode(testNode, new Context(path.resolve(''), [], { code: testCode }, {})); + + const logMessage = consoleSpy.mock.calls[0]; + expect(logMessage).toEqual(undefined); + }); + +test('processNode logs warning when lazy pic no width and height', + () => { + const nodeProcessor = getNewDefaultNodeProcessor(); + + const testCode = ''; + const testNode = parseHTML(testCode)[0] as MbNode; + + const consoleSpy = jest.spyOn(logger, 'warn'); + + nodeProcessor.processNode(testNode, new Context(path.resolve(''), [], { code: testCode }, {})); + + const logMessage = consoleSpy.mock.calls[0][0]; + expect(logMessage).toEqual('Both width and height are not specified at the code below, ' + + 'lazy loading might cause shifting in page layouts. ' + + 'To ensure proper functioning of lazy loading, please specify either one or both.' + + ''); + }); + +test('processNode logs warning when lazy annotate no width and height', + () => { + const nodeProcessor = getNewDefaultNodeProcessor(); + + const testCode = ''; + const testNode = parseHTML(testCode)[0] as MbNode; + + const consoleSpy = jest.spyOn(logger, 'warn'); + + nodeProcessor.processNode(testNode, new Context(path.resolve(''), [], { code: testCode }, {})); + + const logMessage = consoleSpy.mock.calls[1][0]; + expect(logMessage).toEqual('Both width and height are not specified at the code below, ' + + 'lazy loading might cause shifting in page layouts. ' + + 'To ensure proper functioning of lazy loading, please specify either one or both.' + + ''); + }); + test('markdown coverts inline colour syntax correctly', async () => { const nodeProcessor = getNewDefaultNodeProcessor(); const indexPath = 'index.md'; From 1516b056b19dc261db33de8bd1d1e668052d41e3 Mon Sep 17 00:00:00 2001 From: Jiu Fong Lam <> Date: Tue, 12 Mar 2024 21:51:24 +0800 Subject: [PATCH 05/10] Update test --- .../cli/test/functional/test_site/expected/testList.html | 6 +++--- .../test_site/expected/testList.page-vue-render.js | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/cli/test/functional/test_site/expected/testList.html b/packages/cli/test/functional/test_site/expected/testList.html index 2228bf1502..4278834e68 100644 --- a/packages/cli/test/functional/test_site/expected/testList.html +++ b/packages/cli/test/functional/test_site/expected/testList.html @@ -378,10 +378,10 @@

    Testing Site-Nav
    Sub-item B1

    • -
  • +
  • Sub-item B2
    • -
  • +
  • Sub-item B3 diff --git a/packages/cli/test/functional/test_site/expected/testList.page-vue-render.js b/packages/cli/test/functional/test_site/expected/testList.page-vue-render.js index 50b1abadb4..ac30178ad0 100644 --- a/packages/cli/test/functional/test_site/expected/testList.page-vue-render.js +++ b/packages/cli/test/functional/test_site/expected/testList.page-vue-render.js @@ -62,7 +62,7 @@ with(this){return _c('ul',{staticStyle:{"list-style-type":"none","padding-inline with(this){return _c('ol',[_c('li',[_v("Testing with various attributes")])])} },function anonymous( ) { -with(this){return _c('ul',{staticStyle:{"list-style-type":"none","padding-inline-start":"0px"}},[_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"glyphicon glyphicon-education text-primary",staticStyle:{"font-size":"20px","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Item A")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticStyle:{"padding-bottom":"0.3em","padding-top":"0.3em","font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"}},[_c('img',{staticClass:"text-warning",staticStyle:{"width":"200px","height":"100px","display":"inline-block"},attrs:{"src":"/test_site/images/deer.jpg","alt":"Icon"}}),_v("​​")]),_c('div',[_v("Item B\n"),_c('ul',{staticStyle:{"list-style-type":"none","padding-inline-start":"0px"}},[_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"fas fa-file-code",staticStyle:{"font-size":"30px","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Sub-item B1")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"},attrs:{"i-spacing":"2rem"}},[_c('span',{staticClass:"fas fa-file-code text-success",staticStyle:{"font-size":"30px","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Sub-item B2")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"fas fa-file-code text-success",staticStyle:{"font-size":"30px","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Sub-item B3\n"),_c('ul',{staticStyle:{"list-style-type":"none","padding-inline-start":"0px"}},[_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticStyle:{"padding-bottom":"0.3em","padding-top":"0.3em","font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"}},[_c('img',{staticStyle:{"width":"50px","height":"50px","display":"inline-block"},attrs:{"src":"/test_site/images/deer.jpg","alt":"Icon"}}),_v("​​")]),_c('div',[_v("Sub-sub-item B3.1")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticStyle:{"padding-bottom":"0.3em","padding-top":"0.3em","font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"}},[_c('img',{staticStyle:{"width":"50px","height":"50px","display":"inline-block"},attrs:{"src":"/test_site/images/deer.jpg","alt":"Icon"}}),_v("​​")]),_c('div',[_v("Sub-sub-item B3.2\n"),_c('ul',[_c('li',{attrs:{"i-class":"text-danger"}},[_v("Sub-sub-sub-item B3.2.1")])])])])])])]),_v(" "),_c('li',{staticStyle:{"display":"flex"},attrs:{"i-spacing":"1rem"}},[_c('span',{staticClass:"fas fa-file-code text-success",staticStyle:{"font-size":"30px","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Sub-item B4")])])])])])])} +with(this){return _c('ul',{staticStyle:{"list-style-type":"none","padding-inline-start":"0px"}},[_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"glyphicon glyphicon-education text-primary",staticStyle:{"font-size":"20px","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Item A")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticStyle:{"padding-bottom":"0.3em","padding-top":"0.3em","font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"}},[_c('img',{staticClass:"text-warning",staticStyle:{"width":"200px","height":"100px","display":"inline-block"},attrs:{"src":"/test_site/images/deer.jpg","alt":"Icon"}}),_v("​​")]),_c('div',[_v("Item B\n"),_c('ul',{staticStyle:{"list-style-type":"none","padding-inline-start":"0px"}},[_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"fas fa-file-code",staticStyle:{"font-size":"30px","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Sub-item B1")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"fas fa-file-code text-success",staticStyle:{"font-size":"30px","min-width":"16px","line-height":"unset","margin-inline-end":"2rem","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Sub-item B2")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"fas fa-file-code text-success",staticStyle:{"font-size":"30px","min-width":"16px","line-height":"unset","margin-inline-end":"2rem","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Sub-item B3\n"),_c('ul',{staticStyle:{"list-style-type":"none","padding-inline-start":"0px"}},[_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticStyle:{"padding-bottom":"0.3em","padding-top":"0.3em","font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"}},[_c('img',{staticStyle:{"width":"50px","height":"50px","display":"inline-block"},attrs:{"src":"/test_site/images/deer.jpg","alt":"Icon"}}),_v("​​")]),_c('div',[_v("Sub-sub-item B3.1")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticStyle:{"padding-bottom":"0.3em","padding-top":"0.3em","font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"}},[_c('img',{staticStyle:{"width":"50px","height":"50px","display":"inline-block"},attrs:{"src":"/test_site/images/deer.jpg","alt":"Icon"}}),_v("​​")]),_c('div',[_v("Sub-sub-item B3.2\n"),_c('ul',[_c('li',{attrs:{"i-class":"text-danger"}},[_v("Sub-sub-sub-item B3.2.1")])])])])])])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"fas fa-file-code text-success",staticStyle:{"font-size":"30px","min-width":"16px","line-height":"unset","margin-inline-end":"1rem","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Sub-item B4")])])])])])])} },function anonymous( ) { with(this){return _c('ol',[_c('li',[_v("Mixing basic and customized lists")])])} From a6c898061fdc31f7f931fa0295a9190b48014c02 Mon Sep 17 00:00:00 2001 From: Jiu Fong Lam <> Date: Wed, 13 Mar 2024 21:11:42 +0800 Subject: [PATCH 06/10] Change log warning output and update test --- packages/core/src/html/NodeProcessor.ts | 8 ++++--- .../core/test/unit/html/NodeProcessor.test.ts | 22 ++++++++++--------- 2 files changed, 17 insertions(+), 13 deletions(-) diff --git a/packages/core/src/html/NodeProcessor.ts b/packages/core/src/html/NodeProcessor.ts index 35f96616b2..75e150d1b6 100644 --- a/packages/core/src/html/NodeProcessor.ts +++ b/packages/core/src/html/NodeProcessor.ts @@ -268,10 +268,12 @@ export class NodeProcessor { case 'annotate': if (_.has(node.attribs, 'lazy') && !(_.has(node.attribs, 'width') || _.has(node.attribs, 'height'))) { - logger.warn('Both width and height are not specified at the code below, ' + const filePath = context.callStack.length > 0 ? context.callStack[context.callStack.length - 1] + : context.cwf; + logger.warn('Both width and height are not specified when using lazy loading in the file below, ' + 'lazy loading might cause shifting in page layouts. ' - + 'To ensure proper functioning of lazy loading, please specify either one or both.' - + `${context.variables.code}`); + + 'To ensure proper functioning of lazy loading, please specify either one or both.\n' + + `In ${filePath}`); } break; default: diff --git a/packages/core/test/unit/html/NodeProcessor.test.ts b/packages/core/test/unit/html/NodeProcessor.test.ts index f825762645..66459e07a8 100644 --- a/packages/core/test/unit/html/NodeProcessor.test.ts +++ b/packages/core/test/unit/html/NodeProcessor.test.ts @@ -132,7 +132,7 @@ test('processNode does not log warning when lazy pic has width or height', const consoleSpy = jest.spyOn(logger, 'warn'); - nodeProcessor.processNode(testNode, new Context(path.resolve(''), [], { code: testCode }, {})); + nodeProcessor.processNode(testNode, new Context(path.resolve(''), [], {}, {})); const logMessage = consoleSpy.mock.calls[0]; expect(logMessage).toEqual(undefined); @@ -147,7 +147,7 @@ test('processNode does not log warning when lazy annotate has width or height', const consoleSpy = jest.spyOn(logger, 'warn'); - nodeProcessor.processNode(testNode, new Context(path.resolve(''), [], { code: testCode }, {})); + nodeProcessor.processNode(testNode, new Context(path.resolve(''), [], {}, {})); const logMessage = consoleSpy.mock.calls[0]; expect(logMessage).toEqual(undefined); @@ -162,13 +162,14 @@ test('processNode logs warning when lazy pic no width and height', const consoleSpy = jest.spyOn(logger, 'warn'); - nodeProcessor.processNode(testNode, new Context(path.resolve(''), [], { code: testCode }, {})); + nodeProcessor.processNode(testNode, new Context('testpath.md', [], {}, {})); const logMessage = consoleSpy.mock.calls[0][0]; - expect(logMessage).toEqual('Both width and height are not specified at the code below, ' + expect(logMessage).toEqual( + 'Both width and height are not specified when using lazy loading in the file below, ' + 'lazy loading might cause shifting in page layouts. ' - + 'To ensure proper functioning of lazy loading, please specify either one or both.' - + ''); + + 'To ensure proper functioning of lazy loading, please specify either one or both.\n' + + 'In testpath.md'); }); test('processNode logs warning when lazy annotate no width and height', @@ -180,13 +181,14 @@ test('processNode logs warning when lazy annotate no width and height', const consoleSpy = jest.spyOn(logger, 'warn'); - nodeProcessor.processNode(testNode, new Context(path.resolve(''), [], { code: testCode }, {})); + nodeProcessor.processNode(testNode, new Context('testpath.md', [], {}, {})); const logMessage = consoleSpy.mock.calls[1][0]; - expect(logMessage).toEqual('Both width and height are not specified at the code below, ' + expect(logMessage).toEqual( + 'Both width and height are not specified when using lazy loading in the file below, ' + 'lazy loading might cause shifting in page layouts. ' - + 'To ensure proper functioning of lazy loading, please specify either one or both.' - + ''); + + 'To ensure proper functioning of lazy loading, please specify either one or both.\n' + + 'In testpath.md'); }); test('markdown coverts inline colour syntax correctly', async () => { From b7c6b0b8b9edb21d77713ec39926cab2f9d3de05 Mon Sep 17 00:00:00 2001 From: Jiu Fong Lam <> Date: Thu, 14 Mar 2024 13:08:25 +0800 Subject: [PATCH 07/10] Update log warning message --- packages/core/src/html/NodeProcessor.ts | 10 ++++++---- .../core/test/unit/html/NodeProcessor.test.ts | 16 ++++++++-------- 2 files changed, 14 insertions(+), 12 deletions(-) diff --git a/packages/core/src/html/NodeProcessor.ts b/packages/core/src/html/NodeProcessor.ts index 75e150d1b6..abf74b9765 100644 --- a/packages/core/src/html/NodeProcessor.ts +++ b/packages/core/src/html/NodeProcessor.ts @@ -270,10 +270,12 @@ export class NodeProcessor { && !(_.has(node.attribs, 'width') || _.has(node.attribs, 'height'))) { const filePath = context.callStack.length > 0 ? context.callStack[context.callStack.length - 1] : context.cwf; - logger.warn('Both width and height are not specified when using lazy loading in the file below, ' - + 'lazy loading might cause shifting in page layouts. ' - + 'To ensure proper functioning of lazy loading, please specify either one or both.\n' - + `In ${filePath}`); + logger.warn( + `${filePath} --- ` + + 'Both width and height are not specified when using lazy loading in the file and' + + ' it might cause shifting in page layouts. ' + + 'To ensure proper functioning of lazy loading, please specify either one or both.\n', + ); } break; default: diff --git a/packages/core/test/unit/html/NodeProcessor.test.ts b/packages/core/test/unit/html/NodeProcessor.test.ts index 66459e07a8..e81110b0fa 100644 --- a/packages/core/test/unit/html/NodeProcessor.test.ts +++ b/packages/core/test/unit/html/NodeProcessor.test.ts @@ -166,10 +166,10 @@ test('processNode logs warning when lazy pic no width and height', const logMessage = consoleSpy.mock.calls[0][0]; expect(logMessage).toEqual( - 'Both width and height are not specified when using lazy loading in the file below, ' - + 'lazy loading might cause shifting in page layouts. ' - + 'To ensure proper functioning of lazy loading, please specify either one or both.\n' - + 'In testpath.md'); + 'testpath.md --- ' + + 'Both width and height are not specified when using lazy loading in the file and' + + ' it might cause shifting in page layouts. ' + + 'To ensure proper functioning of lazy loading, please specify either one or both.\n'); }); test('processNode logs warning when lazy annotate no width and height', @@ -185,10 +185,10 @@ test('processNode logs warning when lazy annotate no width and height', const logMessage = consoleSpy.mock.calls[1][0]; expect(logMessage).toEqual( - 'Both width and height are not specified when using lazy loading in the file below, ' - + 'lazy loading might cause shifting in page layouts. ' - + 'To ensure proper functioning of lazy loading, please specify either one or both.\n' - + 'In testpath.md'); + 'testpath.md --- ' + + 'Both width and height are not specified when using lazy loading in the file and' + + ' it might cause shifting in page layouts. ' + + 'To ensure proper functioning of lazy loading, please specify either one or both.\n'); }); test('markdown coverts inline colour syntax correctly', async () => { From 7d871f35bdd64dd02738fcde64e06232fe3b7b20 Mon Sep 17 00:00:00 2001 From: Lam Jiu Fong <122192553+LamJiuFong@users.noreply.github.com> Date: Thu, 14 Mar 2024 21:08:06 +0800 Subject: [PATCH 08/10] Update docs/userGuide/syntax/pictures.md Co-authored-by: david <71922282+itsyme@users.noreply.github.com> --- docs/userGuide/syntax/pictures.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/userGuide/syntax/pictures.md b/docs/userGuide/syntax/pictures.md index 9546dd927e..592f0ce46f 100644 --- a/docs/userGuide/syntax/pictures.md +++ b/docs/userGuide/syntax/pictures.md @@ -31,7 +31,7 @@ lazy | `boolean` | false | The `` component lazy loads if this attribute is
    - + MarkBind Logo
    From d5bdec7643edef9c2738a8bf25253e1076b64cdd Mon Sep 17 00:00:00 2001 From: Jiu Fong Lam <> Date: Sat, 16 Mar 2024 03:39:47 +0800 Subject: [PATCH 09/10] Update tests --- .../core/test/unit/html/NodeProcessor.test.ts | 25 +++++++++++-------- 1 file changed, 14 insertions(+), 11 deletions(-) diff --git a/packages/core/test/unit/html/NodeProcessor.test.ts b/packages/core/test/unit/html/NodeProcessor.test.ts index e81110b0fa..83ce523f9a 100644 --- a/packages/core/test/unit/html/NodeProcessor.test.ts +++ b/packages/core/test/unit/html/NodeProcessor.test.ts @@ -1,13 +1,22 @@ import path from 'path'; import cheerio from 'cheerio'; import htmlparser from 'htmlparser2'; -import * as testData from './NodeProcessor.data'; +import { expect } from '@jest/globals'; import * as logger from '../../../src/utils/logger'; +import * as testData from './NodeProcessor.data'; import { Context } from '../../../src/html/Context'; import { shiftSlotNodeDeeper, transformOldSlotSyntax } from '../../../src/html/vueSlotSyntaxProcessor'; import { getNewDefaultNodeProcessor } from '../utils/utils'; import { MbNode, parseHTML } from '../../../src/utils/node'; +jest.mock('../../../src/utils/logger', () => ({ + warn: jest.fn(), +})); + +afterEach(() => { + jest.clearAllMocks(); +}); + /** * Runs the processNode or postProcessNode method of NodeProcessor on the provided * template, verifying it with the expected result. @@ -134,8 +143,7 @@ test('processNode does not log warning when lazy pic has width or height', nodeProcessor.processNode(testNode, new Context(path.resolve(''), [], {}, {})); - const logMessage = consoleSpy.mock.calls[0]; - expect(logMessage).toEqual(undefined); + expect(consoleSpy).not.toHaveBeenCalled(); }); test('processNode does not log warning when lazy annotate has width or height', @@ -149,8 +157,7 @@ test('processNode does not log warning when lazy annotate has width or height', nodeProcessor.processNode(testNode, new Context(path.resolve(''), [], {}, {})); - const logMessage = consoleSpy.mock.calls[0]; - expect(logMessage).toEqual(undefined); + expect(consoleSpy).not.toHaveBeenCalled(); }); test('processNode logs warning when lazy pic no width and height', @@ -164,9 +171,7 @@ test('processNode logs warning when lazy pic no width and height', nodeProcessor.processNode(testNode, new Context('testpath.md', [], {}, {})); - const logMessage = consoleSpy.mock.calls[0][0]; - expect(logMessage).toEqual( - 'testpath.md --- ' + expect(consoleSpy).toHaveBeenCalledWith('testpath.md --- ' + 'Both width and height are not specified when using lazy loading in the file and' + ' it might cause shifting in page layouts. ' + 'To ensure proper functioning of lazy loading, please specify either one or both.\n'); @@ -183,9 +188,7 @@ test('processNode logs warning when lazy annotate no width and height', nodeProcessor.processNode(testNode, new Context('testpath.md', [], {}, {})); - const logMessage = consoleSpy.mock.calls[1][0]; - expect(logMessage).toEqual( - 'testpath.md --- ' + expect(consoleSpy).toHaveBeenCalledWith('testpath.md --- ' + 'Both width and height are not specified when using lazy loading in the file and' + ' it might cause shifting in page layouts. ' + 'To ensure proper functioning of lazy loading, please specify either one or both.\n'); From 92b1c367c9dfdabe47ed408f3005b896d0795a8e Mon Sep 17 00:00:00 2001 From: Jiu Fong Lam <> Date: Sun, 17 Mar 2024 15:30:08 +0800 Subject: [PATCH 10/10] Remove unnecessary changes --- docs/userGuide/syntax/pictures.md | 2 +- packages/core/src/html/NodeProcessor.ts | 2 ++ packages/core/test/unit/html/NodeProcessor.test.ts | 1 - 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/docs/userGuide/syntax/pictures.md b/docs/userGuide/syntax/pictures.md index 592f0ce46f..f5bfde2ac8 100644 --- a/docs/userGuide/syntax/pictures.md +++ b/docs/userGuide/syntax/pictures.md @@ -31,7 +31,7 @@ lazy | `boolean` | false | The `` component lazy loads if this attribute is
    - + MarkBind Logo
    diff --git a/packages/core/src/html/NodeProcessor.ts b/packages/core/src/html/NodeProcessor.ts index abf74b9765..b211d7168d 100644 --- a/packages/core/src/html/NodeProcessor.ts +++ b/packages/core/src/html/NodeProcessor.ts @@ -175,6 +175,7 @@ export class NodeProcessor { // log warnings for conflicting attributes if (_.has(warnConflictingAtributesMap, node.name)) { warnConflictingAtributesMap[node.name](node); } + switch (node.name) { case 'frontmatter': this._processFrontmatter(node, context); @@ -284,6 +285,7 @@ export class NodeProcessor { } catch (error) { logger.error(error); } + return context; } diff --git a/packages/core/test/unit/html/NodeProcessor.test.ts b/packages/core/test/unit/html/NodeProcessor.test.ts index baefa7d40e..10505ccd2c 100644 --- a/packages/core/test/unit/html/NodeProcessor.test.ts +++ b/packages/core/test/unit/html/NodeProcessor.test.ts @@ -4,7 +4,6 @@ import htmlparser from 'htmlparser2'; import { expect } from '@jest/globals'; import * as logger from '../../../src/utils/logger'; import * as testData from './NodeProcessor.data'; -import * as logger from '../../../src/utils/logger'; import { Context } from '../../../src/html/Context'; import { shiftSlotNodeDeeper, transformOldSlotSyntax } from '../../../src/html/vueSlotSyntaxProcessor'; import { getNewDefaultNodeProcessor } from '../utils/utils';