From b3261905b6ac7b1a1d79e41bb137c52a863470b6 Mon Sep 17 00:00:00 2001 From: Owen Buckley Date: Sun, 8 May 2022 11:26:14 -0400 Subject: [PATCH 1/4] implement a renderFromHTML method --- src/wcc.js | 19 +++- .../render-from-html/render-from-html.spec.js | 101 ++++++++++++++++++ .../render-from-html/src/components/header.js | 40 +++++++ .../src/components/navigation.js | 27 +++++ 4 files changed, 184 insertions(+), 3 deletions(-) create mode 100644 test/cases/render-from-html/render-from-html.spec.js create mode 100644 test/cases/render-from-html/src/components/header.js create mode 100644 test/cases/render-from-html/src/components/navigation.js diff --git a/src/wcc.js b/src/wcc.js index 157aacdb..9dd7435a 100644 --- a/src/wcc.js +++ b/src/wcc.js @@ -3,7 +3,7 @@ import './dom-shim.js'; import * as acorn from 'acorn'; import * as walk from 'acorn-walk'; -import { parseFragment, serialize } from 'parse5'; +import { parse, parseFragment, serialize } from 'parse5'; import fs from 'node:fs/promises'; @@ -108,8 +108,21 @@ async function renderToString(elementURL, options = {}) { }; } -// TODO renderToStream +async function renderFromHTML(html, elements = []) { + for (const url of elements) { + await initializeCustomElement(url); + } + + const elementTree = parse(html); + const finalTree = await renderComponentRoots(elementTree); + + return { + html: serialize(finalTree), + metadata: deps + }; +} export { - renderToString + renderToString, + renderFromHTML }; \ No newline at end of file diff --git a/test/cases/render-from-html/render-from-html.spec.js b/test/cases/render-from-html/render-from-html.spec.js new file mode 100644 index 00000000..f4191e78 --- /dev/null +++ b/test/cases/render-from-html/render-from-html.spec.js @@ -0,0 +1,101 @@ +/* + * Use Case + * Run wcc against nested custom elements with declarative shadow dom from an HTML string. + * + * User Result + * Should return the expected HTML output for all levels of element nesting. + * + * User Workspace + * src/ + * components/ + * navigation.js + * header.js + */ +import chai from 'chai'; +import { JSDOM } from 'jsdom'; +import { renderFromHTML } from '../../../src/wcc.js'; + +const expect = chai.expect; + +describe('Run WCC For ', function() { + const LABEL = 'Using renderFromHTML'; + let dom; + let assetMetadata; + + before(async function() { + const { html, metadata } = await renderFromHTML(` + + + WCC + + + +

Home Page

+ + + `, [ + new URL('./src/components/header.js', import.meta.url) + ]); + + dom = new JSDOM(html); + assetMetadata = metadata; + }); + + describe(LABEL, function() { + describe('static page content', function() { + it('should have the expected static content for the page', function() { + expect(dom.window.document.querySelector('h1').textContent).to.equal('Home Page'); + }); + }); + + describe('custom header element with nested navigation element', function() { + let headerContentsDom; + + before(function() { + headerContentsDom = new JSDOM(dom.window.document.querySelectorAll('wcc-header template[shadowroot="open"]')[0].innerHTML); + }); + + it('should have a
tag within the