From 68e9a70a912d89ae7b54ebbfe00d8f2beb01a068 Mon Sep 17 00:00:00 2001 From: Owen Buckley Date: Sat, 26 Mar 2022 19:51:41 -0400 Subject: [PATCH 1/3] polyfill DSD flag --- packages/plugin-renderer-lit/src/index.js | 12 +- .../src/polyfill-resource.js | 41 ++++ .../cases/serve.config.polyfill/artists.json | 134 ++++++++++++ .../serve.config.polyfill/greenwood.config.js | 9 + .../cases/serve.config.polyfill/package.json | 7 + .../serve.config.polyfill.spec.js | 198 ++++++++++++++++++ .../src/components/footer.js | 49 +++++ .../src/components/greeting.js | 24 +++ .../src/pages/artists.js | 84 ++++++++ .../src/templates/app.html | 12 ++ 10 files changed, 567 insertions(+), 3 deletions(-) create mode 100644 packages/plugin-renderer-lit/src/polyfill-resource.js create mode 100644 packages/plugin-renderer-lit/test/cases/serve.config.polyfill/artists.json create mode 100644 packages/plugin-renderer-lit/test/cases/serve.config.polyfill/greenwood.config.js create mode 100644 packages/plugin-renderer-lit/test/cases/serve.config.polyfill/package.json create mode 100644 packages/plugin-renderer-lit/test/cases/serve.config.polyfill/serve.config.polyfill.spec.js create mode 100644 packages/plugin-renderer-lit/test/cases/serve.config.polyfill/src/components/footer.js create mode 100644 packages/plugin-renderer-lit/test/cases/serve.config.polyfill/src/components/greeting.js create mode 100644 packages/plugin-renderer-lit/test/cases/serve.config.polyfill/src/pages/artists.js create mode 100644 packages/plugin-renderer-lit/test/cases/serve.config.polyfill/src/templates/app.html diff --git a/packages/plugin-renderer-lit/src/index.js b/packages/plugin-renderer-lit/src/index.js index 4c06c0692..e3213ab2e 100755 --- a/packages/plugin-renderer-lit/src/index.js +++ b/packages/plugin-renderer-lit/src/index.js @@ -1,14 +1,20 @@ +import { PolyfillsResource } from './polyfill-resource.js'; + const greenwoodPluginRendererLit = (options = {}) => { - return { + return [{ type: 'renderer', - name: 'plugin-renderer-lit', + name: 'plugin-renderer-lit:renderer', provider: () => { return { workerUrl: new URL('./ssr-route-worker-lit.js', import.meta.url), prerender: options.prerender }; } - }; + }, { + type: 'resource', + name: 'plugin-renderer-lit:resource', + provider: (compilation) => new PolyfillsResource(compilation, options) + }]; }; export { diff --git a/packages/plugin-renderer-lit/src/polyfill-resource.js b/packages/plugin-renderer-lit/src/polyfill-resource.js new file mode 100644 index 000000000..498e38ef5 --- /dev/null +++ b/packages/plugin-renderer-lit/src/polyfill-resource.js @@ -0,0 +1,41 @@ +import path from 'path'; +import { ResourceInterface } from '@greenwood/cli/src/lib/resource-interface.js'; + +class PolyfillsResource extends ResourceInterface { + constructor(compilation, options = {}) { + super(compilation, options); + } + + async shouldOptimize(url = '', body, headers = {}) { + return Promise.resolve(this.options.polyfill && path.extname(url) === '.html' || (headers.request && headers.request['content-type'].indexOf('text/html') >= 0)); + } + + async optimize(url, body) { + return new Promise(async (resolve, reject) => { + try { + const newHtml = body.replace('', ` + + + `); + + resolve(newHtml); + } catch (e) { + reject(e); + } + }); + } +} + +export { PolyfillsResource }; \ No newline at end of file diff --git a/packages/plugin-renderer-lit/test/cases/serve.config.polyfill/artists.json b/packages/plugin-renderer-lit/test/cases/serve.config.polyfill/artists.json new file mode 100644 index 000000000..a6e94f271 --- /dev/null +++ b/packages/plugin-renderer-lit/test/cases/serve.config.polyfill/artists.json @@ -0,0 +1,134 @@ +[ + { + "id":"1", + "name":"Analog", + "imageUrl":"\/\/d34k5cjnk2rcze.cloudfront.net\/images\/artists\/analog.jpg", + "genre":"Rock and Roll", + "location":"Block Island. RI", + "label":"Analog Studios", + "contactPhone":null, + "contactEmail":"dave@analogstudios.net", + "bio":"

Analog, a power duo consisting of guitar and drums, formed and has performed on Block Island for over 2 years.  Dave Flamand (vocals and guitar) and Eli Sprague (drums) deliver an original, powerful rock sound showcasing Flamand’s songwriting.  Strong rock beats, smooth vocals, and loud guitar tone meld together to create Analog’s unique sound.  The band currently has begun recording for its new album where it considers home base; Analog Studios in Newport, RI.<\/p>\n", + "isActive":"1" + }, + { + "id":"2", + "name":"Electro Calrissian", + "imageUrl":"\/\/d34k5cjnk2rcze.cloudfront.net\/images\/artists\/electro-calrissian.jpg", + "genre":"Punk Rock", + "location":"North Conway, NH", + "label":"Analog Studios", + "contactPhone":null, + "contactEmail":"electrocalrissian@gmail.com", + "bio":"A hard rock band from Conway, NH, Electro Calrissian knows how to crank out the tunes. Once a solid three piece, these days the lineup features songwriter Zack Smith on guitars, bass, and vocals and Nat MacDonald also playing guitar, bass, and singing. Aside from their usual gigs, Zack can often be found playing down at Open Mic on Mondays at the Red Parka Pub or Matty Bs Pizza. Check out their MySpace page for more up to date info, music, and news, maintained by their good friend and manager, Aldon Miller.", + "isActive":"1" + }, + { + "id":"3", + "name":"Rory Boyan", + "imageUrl":"\/\/d34k5cjnk2rcze.cloudfront.net\/images\/artists\/rory.jpg", + "genre":"Jam\/Instrumental", + "location":"Lowell, MA", + "label":"Analog Studios", + "contactPhone":null, + "contactEmail":"roryboyan@yahoo.com", + "bio":"One of my best friends, Rory plays instrumental music in a genre all to his own. Combining elements of blues, reggae, and percussion into his guitar playing, Rory manages to create something unique to him, and him alone. If you like chilled out and inspiring music, then you found your man.", + "isActive":"1" + }, + { + "id":"4", + "name":"Laurent Bonetto", + "imageUrl":"\/\/d34k5cjnk2rcze.cloudfront.net\/images\/artists\/laurent-bonetto.jpg", + "genre":"Classical", + "location":"Providence. RI", + "label":"Analog Studios", + "contactPhone":"0", + "contactEmail":"lbonetto-at-yahoo.com", + "bio":"

While pursuing a scientific career, Laurent has always kept playing the piano as one of the main occupations of his life; a passion he has had since the age of 5. Since the age of 15, he has practiced with concert pianist Nathalie Bera-Tagrine, with whom he studies when he returns to France. Laurent has taken numerous masters classes in Europe and the US, participated in many concerts, and competitions, and has recorded two piano CDs.<\/p>\n", + "isActive":"1" + }, + { + "id":"5", + "name":"The Silks", + "imageUrl":"\/\/d34k5cjnk2rcze.cloudfront.net\/images\/artists\/the-silks.jpg", + "genre":"Blues\/Rock", + "location":"Providence, RI", + "label":null, + "contactPhone":null, + "contactEmail":"T.J.@email.com", + "bio":"The Silks are cool jazz rock band originating out of the Providence area.", + "isActive":"0" + }, + { + "id":"6", + "name":"Dave Flamand", + "imageUrl":"\/\/d34k5cjnk2rcze.cloudfront.net\/images\/artists\/dave-flamand.jpg", + "genre":"Acoustic\/Rock", + "location":"Block Island, RI", + "label":"Analog Studios", + "contactPhone":null, + "contactEmail":"dave@analogstudios.net", + "bio":"

Dave Flamand, a talented songwriter and lead singer for Analog, has performed on Block Island, RI and Newport, RI for a few years.  Original acoustic rock paired with powerful vocals best describes his tailored sound.  Dave accompanies himself with either an acoustic guitar or the piano when he sings his dynamic original songs.   Dave also has a craft of selecting and performing cover songs that define and truly envelope his own style.  New music releases from Dave Flamand can be expected soon.  He is currently enjoying the lovely comforts of Analog Studios recording studio in Newport, RI.<\/p>", + "isActive":"1" + }, + { + "id":"7", + "name":"Audio Kickstand", + "imageUrl":"\/\/d34k5cjnk2rcze.cloudfront.net\/images\/artists\/audio-kickstand.jpg", + "genre":"Jam\/Rock", + "location":"Glen, NH", + "label":null, + "contactPhone":null, + "contactEmail":null, + "bio":"A great rock and jam band from Glen, NH, Audio Kickstand really knows how to get you out of your seat and dancing! This band is a prominent fixture down at the Red Parka Pub and you can almost always hear them playing Monday nights there for Open Mic. You can visit their myspace page for more news and info.", + "isActive":"1" + }, + { + "id":"8", + "name":"Jay St", + "imageUrl":"\/\/d34k5cjnk2rcze.cloudfront.net\/images\/artists\/jay-st.jpg", + "genre":"Rock and Roll", + "location":"Fitchburg, MA", + "label":"Analog Studios", + "contactPhone":null, + "contactEmail":null, + "bio":"Hailing from the basement of the coolest house on the craziest cobblestone hill, in Fitchburg, MA, Jay St. was the party band of the Fitchburg scene during the years of 2003-2005. While actively playing out at Hoolingans bar, they were also well known for throwing some of the best parties. (Even during the winter!) Even though they are no more, their infamy lives on thanks to their recordings being unearthed and posted for all to enjoy. So, if the dude abides, then so do we. Oh yeah, mind if I do a J?", + "isActive":"1" + }, + { + "id":"9", + "name":"Various Artists", + "imageUrl":"\/\/d34k5cjnk2rcze.cloudfront.net\/images\/artists\/various-artists.jpg", + "genre":"Rock and Roll", + "location":null, + "label":"Analog Studios", + "contactPhone":null, + "contactEmail":null, + "bio":"This is a compilation profile for various recordings and musical compilations", + "isActive":"1" + }, + { + "id":"10", + "name":"Metal Wings", + "imageUrl":"\/\/d34k5cjnk2rcze.cloudfront.net\/images\/artists\/metal-wings.png", + "genre":"Hip Hop", + "location":"Boston, MA", + "label":"", + "contactPhone":"0", + "contactEmail":"steezsp@yahoo.com", + "bio":"

Metal Wings is Ryan Mialler, a Hip Hop producer, MC, and Yoga teacher.  He wrote "Another Fall Harvest" in a single week in August 2012. After years of dabbling in producing he finally committed to making a solo album when I decided to make "Spiritual Warfare" and had it produced down at Analog Studios.  Ryan is one of our good friends so please check out all his work on iTunes.<\/p>\n", + "isActive":"1" + }, + { + "id":"11", + "name":"FAVE", + "imageUrl":"\/\/d34k5cjnk2rcze.cloudfront.net\/images\/artists\/fave-band.png", + "genre":"Rock and Roll", + "location":"Newport, RI", + "label":"Analog Studios", + "contactPhone":"0", + "contactEmail":"davef.analog@gmail.com", + "bio":"FAVE is a three piece band featuring Dave Flamand on piano, Bill Bartholomew on drums, and Mason Dubois on bass. The group has a cinematic and orchestral sound that ushers listeners along on a soundscape journey. Their new album \"Nowadays\" was released on 6\/20\/2021. Check out their singles \"Nowadays\" and \"Zodiac\" where ever you get your music.", + "isActive":"1" + } +] \ No newline at end of file diff --git a/packages/plugin-renderer-lit/test/cases/serve.config.polyfill/greenwood.config.js b/packages/plugin-renderer-lit/test/cases/serve.config.polyfill/greenwood.config.js new file mode 100644 index 000000000..5de42d476 --- /dev/null +++ b/packages/plugin-renderer-lit/test/cases/serve.config.polyfill/greenwood.config.js @@ -0,0 +1,9 @@ +import { greenwoodPluginRendererLit } from '../../../src/index.js'; + +export default { + plugins: [ + ...greenwoodPluginRendererLit({ + polyfill: true + }) + ] +}; \ No newline at end of file diff --git a/packages/plugin-renderer-lit/test/cases/serve.config.polyfill/package.json b/packages/plugin-renderer-lit/test/cases/serve.config.polyfill/package.json new file mode 100644 index 000000000..f51daf1d8 --- /dev/null +++ b/packages/plugin-renderer-lit/test/cases/serve.config.polyfill/package.json @@ -0,0 +1,7 @@ +{ + "name": "plugin-prerender-lit-build-config-polyfill", + "type": "module", + "dependencies": { + "lit": "^2.1.1" + } +} \ No newline at end of file diff --git a/packages/plugin-renderer-lit/test/cases/serve.config.polyfill/serve.config.polyfill.spec.js b/packages/plugin-renderer-lit/test/cases/serve.config.polyfill/serve.config.polyfill.spec.js new file mode 100644 index 000000000..f277ed083 --- /dev/null +++ b/packages/plugin-renderer-lit/test/cases/serve.config.polyfill/serve.config.polyfill.spec.js @@ -0,0 +1,198 @@ +/* + * Use Case + * Run Greenwood with an SSR route. + * + * User Result + * Should generate a Greenwood build for hosting a server rendered application with polyfills. + * + * User Command + * greenwood build + * + * User Config + * export default { + * plugins: [ + * greenwoodPluginRendererLit({ + * polyfill: true + * }) + * ] + * }; + * + * User Workspace + * src/ + * components/ + * footer.js + * pages/ + * artists.js + * templates/ + * app.html + */ +import chai from 'chai'; +import { JSDOM } from 'jsdom'; +import path from 'path'; +import { getSetupFiles, getDependencyFiles, getOutputTeardownFiles } from '../../../../../test/utils.js'; +import request from 'request'; +import { Runner } from 'gallinago'; +import { fileURLToPath, URL } from 'url'; + +const expect = chai.expect; + +describe('Serve Greenwood With Custom Lit Rendering for SSR: ', function() { + const LABEL = 'With Polyfills for Declarative Shadow DOM'; + const cliPath = path.join(process.cwd(), 'packages/cli/src/index.js'); + const outputPath = fileURLToPath(new URL('.', import.meta.url)); + const hostname = 'http://127.0.0.1:8080'; + let runner; + + before(async function() { + this.context = { + publicDir: path.join(outputPath, 'public') + }; + runner = new Runner(); + }); + + describe(LABEL, function() { + + before(async function() { + const lit = await getDependencyFiles( + `${process.cwd()}/node_modules/lit/*.js`, + `${outputPath}/node_modules/lit/` + ); + const litDecorators = await getDependencyFiles( + `${process.cwd()}/node_modules/lit/decorators/*.js`, + `${outputPath}/node_modules/lit/decorators/` + ); + const litDirectives = await getDependencyFiles( + `${process.cwd()}/node_modules/lit/directives/*.js`, + `${outputPath}/node_modules/lit/directives/` + ); + const litPackageJson = await getDependencyFiles( + `${process.cwd()}/node_modules/lit/package.json`, + `${outputPath}/node_modules/lit/` + ); + const litElement = await getDependencyFiles( + `${process.cwd()}/node_modules/lit-element/*.js`, + `${outputPath}/node_modules/lit-element/` + ); + const litElementPackageJson = await getDependencyFiles( + `${process.cwd()}/node_modules/lit-element/package.json`, + `${outputPath}/node_modules/lit-element/` + ); + const litElementDecorators = await getDependencyFiles( + `${process.cwd()}/node_modules/lit-element/decorators/*.js`, + `${outputPath}/node_modules/lit-element/decorators/` + ); + const litHtml = await getDependencyFiles( + `${process.cwd()}/node_modules/lit-html/*.js`, + `${outputPath}/node_modules/lit-html/` + ); + const litHtmlPackageJson = await getDependencyFiles( + `${process.cwd()}/node_modules/lit-html/package.json`, + `${outputPath}/node_modules/lit-html/` + ); + const litHtmlDirectives = await getDependencyFiles( + `${process.cwd()}/node_modules/lit-html/directives/*.js`, + `${outputPath}/node_modules/lit-html/directives/` + ); + // lit-html has a dependency on this + // https://github.com/lit/lit/blob/main/packages/lit-html/package.json#L82 + const trustedTypes = await getDependencyFiles( + `${process.cwd()}/node_modules/@types/trusted-types/package.json`, + `${outputPath}/node_modules/@types/trusted-types/` + ); + const litReactiveElement = await getDependencyFiles( + `${process.cwd()}/node_modules/@lit/reactive-element/*.js`, + `${outputPath}/node_modules/@lit/reactive-element/` + ); + const litReactiveElementDecorators = await getDependencyFiles( + `${process.cwd()}/node_modules/@lit/reactive-element/decorators/*.js`, + `${outputPath}/node_modules/@lit/reactive-element/decorators/` + ); + const litReactiveElementPackageJson = await getDependencyFiles( + `${process.cwd()}/node_modules/@lit/reactive-element/package.json`, + `${outputPath}/node_modules/@lit/reactive-element/` + ); + + await runner.setup(outputPath, [ + ...getSetupFiles(outputPath), + ...lit, + ...litPackageJson, + ...litDirectives, + ...litDecorators, + ...litElementPackageJson, + ...litElement, + ...litElementDecorators, + ...litHtmlPackageJson, + ...litHtml, + ...litHtmlDirectives, + ...trustedTypes, + ...litReactiveElement, + ...litReactiveElementDecorators, + ...litReactiveElementPackageJson + ]); + + return new Promise(async (resolve) => { + setTimeout(() => { + resolve(); + }, 10000); + + await runner.runCommand(cliPath, 'serve'); + }); + }); + + let response = {}; + let dom; + + before(async function() { + return new Promise((resolve, reject) => { + request.get(`${hostname}/artists/`, (err, res, body) => { + if (err) { + reject(); + } + + response = res; + response.body = body; + dom = new JSDOM(body); + + resolve(); + }); + }); + }); + + describe('Serve command with Polyfill in the HTML route response', function() { + + it('should return a 200 status', function(done) { + expect(response.statusCode).to.equal(200); + done(); + }); + + it('should return the correct content type', function(done) { + expect(response.headers['content-type']).to.contain('text/html'); + done(); + }); + + it('should return a response body', function(done) { + expect(response.body).to.not.be.undefined; + done(); + }); + + it('the response body should be valid HTML from JSDOM', function(done) { + expect(dom).to.not.be.undefined; + done(); + }); + + it('should have one + + +

This heading was rendered server side!

+ + + + `; +} + +async function getBody() { + const artists = JSON.parse(await fs.promises.readFile(new URL('../../artists.json', import.meta.url), 'utf-8')); + + return html` +

Lit SSR response

+ + + + + + + + + ${ + artists.map((artist) => { + const { id, name, bio, imageUrl } = artist; + + return html` + + + + + + + + `; + }) + } +
IDNameDescriptionMessagePicture
${id}${name}${unsafeHTML(bio)} + + + +
+ `; +} + +async function getFrontmatter(compilation, route) { + return { + menu: 'navigation', + index: 7, + title: `My App - ${route}`, + data: { + author: 'Project Evergreen', + date: '01-01-2021' + } + }; +} + +export { + getTemplate, + getBody, + getFrontmatter +}; \ No newline at end of file diff --git a/packages/plugin-renderer-lit/test/cases/serve.config.polyfill/src/templates/app.html b/packages/plugin-renderer-lit/test/cases/serve.config.polyfill/src/templates/app.html new file mode 100644 index 000000000..31457a410 --- /dev/null +++ b/packages/plugin-renderer-lit/test/cases/serve.config.polyfill/src/templates/app.html @@ -0,0 +1,12 @@ + + + + My App + + + + + + + + \ No newline at end of file From 188e52b81a6566d2d4a11d5c29127b89db4432ad Mon Sep 17 00:00:00 2001 From: Owen Buckley Date: Sat, 26 Mar 2022 19:52:04 -0400 Subject: [PATCH 2/3] rename specs to better reflect intent --- .../build.config.prerender-getting-started.spec.js} | 12 +++++------- .../greenwood.config.js | 2 +- .../package.json | 7 +++++++ .../src/assets/greenwood-logo.png | Bin .../src/components/footer.js | 0 .../src/components/header.js | 0 .../src/pages/blog/first-post.md | 0 .../src/pages/blog/second-post.md | 0 .../src/pages/index.md | 0 .../src/styles/theme.css | 0 .../src/templates/blog.html | 0 .../src/templates/page.html | 0 .../build.prerender.getting-started/package.json | 7 ------- .../{build.default => serve.default}/artists.json | 0 .../greenwood.config.js | 2 +- .../{build.default => serve.default}/package.json | 0 .../serve.default.spec.js} | 8 ++++++-- .../src/components/footer.js | 0 .../src/components/greeting.js | 0 .../src/pages/artists.js | 0 .../src/templates/app.html | 0 21 files changed, 20 insertions(+), 18 deletions(-) rename packages/plugin-renderer-lit/test/cases/{build.prerender.getting-started/build.prerender.getting-started.spec.js => build.config.prerender-getting-started/build.config.prerender-getting-started.spec.js} (96%) rename packages/plugin-renderer-lit/test/cases/{build.prerender.getting-started => build.config.prerender-getting-started}/greenwood.config.js (78%) create mode 100644 packages/plugin-renderer-lit/test/cases/build.config.prerender-getting-started/package.json rename packages/plugin-renderer-lit/test/cases/{build.prerender.getting-started => build.config.prerender-getting-started}/src/assets/greenwood-logo.png (100%) rename packages/plugin-renderer-lit/test/cases/{build.prerender.getting-started => build.config.prerender-getting-started}/src/components/footer.js (100%) rename packages/plugin-renderer-lit/test/cases/{build.prerender.getting-started => build.config.prerender-getting-started}/src/components/header.js (100%) rename packages/plugin-renderer-lit/test/cases/{build.prerender.getting-started => build.config.prerender-getting-started}/src/pages/blog/first-post.md (100%) rename packages/plugin-renderer-lit/test/cases/{build.prerender.getting-started => build.config.prerender-getting-started}/src/pages/blog/second-post.md (100%) rename packages/plugin-renderer-lit/test/cases/{build.prerender.getting-started => build.config.prerender-getting-started}/src/pages/index.md (100%) rename packages/plugin-renderer-lit/test/cases/{build.prerender.getting-started => build.config.prerender-getting-started}/src/styles/theme.css (100%) rename packages/plugin-renderer-lit/test/cases/{build.prerender.getting-started => build.config.prerender-getting-started}/src/templates/blog.html (100%) rename packages/plugin-renderer-lit/test/cases/{build.prerender.getting-started => build.config.prerender-getting-started}/src/templates/page.html (100%) delete mode 100644 packages/plugin-renderer-lit/test/cases/build.prerender.getting-started/package.json rename packages/plugin-renderer-lit/test/cases/{build.default => serve.default}/artists.json (100%) rename packages/plugin-renderer-lit/test/cases/{build.default => serve.default}/greenwood.config.js (74%) rename packages/plugin-renderer-lit/test/cases/{build.default => serve.default}/package.json (100%) rename packages/plugin-renderer-lit/test/cases/{build.default/build.default.spec.js => serve.default/serve.default.spec.js} (98%) rename packages/plugin-renderer-lit/test/cases/{build.default => serve.default}/src/components/footer.js (100%) rename packages/plugin-renderer-lit/test/cases/{build.default => serve.default}/src/components/greeting.js (100%) rename packages/plugin-renderer-lit/test/cases/{build.default => serve.default}/src/pages/artists.js (100%) rename packages/plugin-renderer-lit/test/cases/{build.default => serve.default}/src/templates/app.html (100%) diff --git a/packages/plugin-renderer-lit/test/cases/build.prerender.getting-started/build.prerender.getting-started.spec.js b/packages/plugin-renderer-lit/test/cases/build.config.prerender-getting-started/build.config.prerender-getting-started.spec.js similarity index 96% rename from packages/plugin-renderer-lit/test/cases/build.prerender.getting-started/build.prerender.getting-started.spec.js rename to packages/plugin-renderer-lit/test/cases/build.config.prerender-getting-started/build.config.prerender-getting-started.spec.js index ce543163f..4c4c0fe06 100644 --- a/packages/plugin-renderer-lit/test/cases/build.prerender.getting-started/build.prerender.getting-started.spec.js +++ b/packages/plugin-renderer-lit/test/cases/build.config.prerender-getting-started/build.config.prerender-getting-started.spec.js @@ -10,15 +10,13 @@ * greenwood build * * User Config - * import { greenwoodPluginIncludeHTML } from '@greenwod/plugin-include-html'; - * - * { - * plugins: [{ + * export default { + * plugins: [ * greenwoodPluginRendererLit({ * prerender: true * }) - * }] - * } + * ] + * }; * * User Workspace * src/ @@ -48,7 +46,7 @@ import { fileURLToPath, URL } from 'url'; const expect = chai.expect; -describe('Build Greenwood With Custom Lit Renderer for SSG prerendering: ', function() { +describe('Build Greenwood With Custom Lit Renderer: ', function() { const LABEL = 'For SSG prerendering of Getting Started example'; const cliPath = path.join(process.cwd(), 'packages/cli/src/index.js'); const outputPath = fileURLToPath(new URL('.', import.meta.url)); diff --git a/packages/plugin-renderer-lit/test/cases/build.prerender.getting-started/greenwood.config.js b/packages/plugin-renderer-lit/test/cases/build.config.prerender-getting-started/greenwood.config.js similarity index 78% rename from packages/plugin-renderer-lit/test/cases/build.prerender.getting-started/greenwood.config.js rename to packages/plugin-renderer-lit/test/cases/build.config.prerender-getting-started/greenwood.config.js index 4b8dff4c9..44fd4123e 100644 --- a/packages/plugin-renderer-lit/test/cases/build.prerender.getting-started/greenwood.config.js +++ b/packages/plugin-renderer-lit/test/cases/build.config.prerender-getting-started/greenwood.config.js @@ -2,7 +2,7 @@ import { greenwoodPluginRendererLit } from '../../../src/index.js'; export default { plugins: [ - greenwoodPluginRendererLit({ + ...greenwoodPluginRendererLit({ prerender: true }) ] diff --git a/packages/plugin-renderer-lit/test/cases/build.config.prerender-getting-started/package.json b/packages/plugin-renderer-lit/test/cases/build.config.prerender-getting-started/package.json new file mode 100644 index 000000000..608c48a7a --- /dev/null +++ b/packages/plugin-renderer-lit/test/cases/build.config.prerender-getting-started/package.json @@ -0,0 +1,7 @@ +{ + "name": "plugin-prerender-lit-build-config-prerender-getting-started", + "type": "module", + "dependencies": { + "lit": "^2.1.1" + } +} \ No newline at end of file diff --git a/packages/plugin-renderer-lit/test/cases/build.prerender.getting-started/src/assets/greenwood-logo.png b/packages/plugin-renderer-lit/test/cases/build.config.prerender-getting-started/src/assets/greenwood-logo.png similarity index 100% rename from packages/plugin-renderer-lit/test/cases/build.prerender.getting-started/src/assets/greenwood-logo.png rename to packages/plugin-renderer-lit/test/cases/build.config.prerender-getting-started/src/assets/greenwood-logo.png diff --git a/packages/plugin-renderer-lit/test/cases/build.prerender.getting-started/src/components/footer.js b/packages/plugin-renderer-lit/test/cases/build.config.prerender-getting-started/src/components/footer.js similarity index 100% rename from packages/plugin-renderer-lit/test/cases/build.prerender.getting-started/src/components/footer.js rename to packages/plugin-renderer-lit/test/cases/build.config.prerender-getting-started/src/components/footer.js diff --git a/packages/plugin-renderer-lit/test/cases/build.prerender.getting-started/src/components/header.js b/packages/plugin-renderer-lit/test/cases/build.config.prerender-getting-started/src/components/header.js similarity index 100% rename from packages/plugin-renderer-lit/test/cases/build.prerender.getting-started/src/components/header.js rename to packages/plugin-renderer-lit/test/cases/build.config.prerender-getting-started/src/components/header.js diff --git a/packages/plugin-renderer-lit/test/cases/build.prerender.getting-started/src/pages/blog/first-post.md b/packages/plugin-renderer-lit/test/cases/build.config.prerender-getting-started/src/pages/blog/first-post.md similarity index 100% rename from packages/plugin-renderer-lit/test/cases/build.prerender.getting-started/src/pages/blog/first-post.md rename to packages/plugin-renderer-lit/test/cases/build.config.prerender-getting-started/src/pages/blog/first-post.md diff --git a/packages/plugin-renderer-lit/test/cases/build.prerender.getting-started/src/pages/blog/second-post.md b/packages/plugin-renderer-lit/test/cases/build.config.prerender-getting-started/src/pages/blog/second-post.md similarity index 100% rename from packages/plugin-renderer-lit/test/cases/build.prerender.getting-started/src/pages/blog/second-post.md rename to packages/plugin-renderer-lit/test/cases/build.config.prerender-getting-started/src/pages/blog/second-post.md diff --git a/packages/plugin-renderer-lit/test/cases/build.prerender.getting-started/src/pages/index.md b/packages/plugin-renderer-lit/test/cases/build.config.prerender-getting-started/src/pages/index.md similarity index 100% rename from packages/plugin-renderer-lit/test/cases/build.prerender.getting-started/src/pages/index.md rename to packages/plugin-renderer-lit/test/cases/build.config.prerender-getting-started/src/pages/index.md diff --git a/packages/plugin-renderer-lit/test/cases/build.prerender.getting-started/src/styles/theme.css b/packages/plugin-renderer-lit/test/cases/build.config.prerender-getting-started/src/styles/theme.css similarity index 100% rename from packages/plugin-renderer-lit/test/cases/build.prerender.getting-started/src/styles/theme.css rename to packages/plugin-renderer-lit/test/cases/build.config.prerender-getting-started/src/styles/theme.css diff --git a/packages/plugin-renderer-lit/test/cases/build.prerender.getting-started/src/templates/blog.html b/packages/plugin-renderer-lit/test/cases/build.config.prerender-getting-started/src/templates/blog.html similarity index 100% rename from packages/plugin-renderer-lit/test/cases/build.prerender.getting-started/src/templates/blog.html rename to packages/plugin-renderer-lit/test/cases/build.config.prerender-getting-started/src/templates/blog.html diff --git a/packages/plugin-renderer-lit/test/cases/build.prerender.getting-started/src/templates/page.html b/packages/plugin-renderer-lit/test/cases/build.config.prerender-getting-started/src/templates/page.html similarity index 100% rename from packages/plugin-renderer-lit/test/cases/build.prerender.getting-started/src/templates/page.html rename to packages/plugin-renderer-lit/test/cases/build.config.prerender-getting-started/src/templates/page.html diff --git a/packages/plugin-renderer-lit/test/cases/build.prerender.getting-started/package.json b/packages/plugin-renderer-lit/test/cases/build.prerender.getting-started/package.json deleted file mode 100644 index fe421bf5b..000000000 --- a/packages/plugin-renderer-lit/test/cases/build.prerender.getting-started/package.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "name": "plugin-prerender-lit-build-prerender-getting-started", - "type": "module", - "dependencies": { - "lit": "^2.1.1" - } -} \ No newline at end of file diff --git a/packages/plugin-renderer-lit/test/cases/build.default/artists.json b/packages/plugin-renderer-lit/test/cases/serve.default/artists.json similarity index 100% rename from packages/plugin-renderer-lit/test/cases/build.default/artists.json rename to packages/plugin-renderer-lit/test/cases/serve.default/artists.json diff --git a/packages/plugin-renderer-lit/test/cases/build.default/greenwood.config.js b/packages/plugin-renderer-lit/test/cases/serve.default/greenwood.config.js similarity index 74% rename from packages/plugin-renderer-lit/test/cases/build.default/greenwood.config.js rename to packages/plugin-renderer-lit/test/cases/serve.default/greenwood.config.js index 24dafff94..ab6e6ba7b 100644 --- a/packages/plugin-renderer-lit/test/cases/build.default/greenwood.config.js +++ b/packages/plugin-renderer-lit/test/cases/serve.default/greenwood.config.js @@ -2,6 +2,6 @@ import { greenwoodPluginRendererLit } from '../../../src/index.js'; export default { plugins: [ - greenwoodPluginRendererLit() + ...greenwoodPluginRendererLit() ] }; \ No newline at end of file diff --git a/packages/plugin-renderer-lit/test/cases/build.default/package.json b/packages/plugin-renderer-lit/test/cases/serve.default/package.json similarity index 100% rename from packages/plugin-renderer-lit/test/cases/build.default/package.json rename to packages/plugin-renderer-lit/test/cases/serve.default/package.json diff --git a/packages/plugin-renderer-lit/test/cases/build.default/build.default.spec.js b/packages/plugin-renderer-lit/test/cases/serve.default/serve.default.spec.js similarity index 98% rename from packages/plugin-renderer-lit/test/cases/build.default/build.default.spec.js rename to packages/plugin-renderer-lit/test/cases/serve.default/serve.default.spec.js index 8cd6fdce9..a56eb638f 100644 --- a/packages/plugin-renderer-lit/test/cases/build.default/build.default.spec.js +++ b/packages/plugin-renderer-lit/test/cases/serve.default/serve.default.spec.js @@ -9,7 +9,11 @@ * greenwood build * * User Config - * {} + * export default { + * plugins: [ + * greenwoodPluginRendererLit() + * ] + * }; * * User Workspace * src/ @@ -33,7 +37,7 @@ import { fileURLToPath, URL } from 'url'; const expect = chai.expect; -describe('Build Greenwood With: ', function() { +describe('Serve Greenwood With: ', function() { const LABEL = 'Custom Lit Renderer for SSR'; const cliPath = path.join(process.cwd(), 'packages/cli/src/index.js'); const outputPath = fileURLToPath(new URL('.', import.meta.url)); diff --git a/packages/plugin-renderer-lit/test/cases/build.default/src/components/footer.js b/packages/plugin-renderer-lit/test/cases/serve.default/src/components/footer.js similarity index 100% rename from packages/plugin-renderer-lit/test/cases/build.default/src/components/footer.js rename to packages/plugin-renderer-lit/test/cases/serve.default/src/components/footer.js diff --git a/packages/plugin-renderer-lit/test/cases/build.default/src/components/greeting.js b/packages/plugin-renderer-lit/test/cases/serve.default/src/components/greeting.js similarity index 100% rename from packages/plugin-renderer-lit/test/cases/build.default/src/components/greeting.js rename to packages/plugin-renderer-lit/test/cases/serve.default/src/components/greeting.js diff --git a/packages/plugin-renderer-lit/test/cases/build.default/src/pages/artists.js b/packages/plugin-renderer-lit/test/cases/serve.default/src/pages/artists.js similarity index 100% rename from packages/plugin-renderer-lit/test/cases/build.default/src/pages/artists.js rename to packages/plugin-renderer-lit/test/cases/serve.default/src/pages/artists.js diff --git a/packages/plugin-renderer-lit/test/cases/build.default/src/templates/app.html b/packages/plugin-renderer-lit/test/cases/serve.default/src/templates/app.html similarity index 100% rename from packages/plugin-renderer-lit/test/cases/build.default/src/templates/app.html rename to packages/plugin-renderer-lit/test/cases/serve.default/src/templates/app.html From df77a96d19cf93511ef2d79ef058e6cce108cbba Mon Sep 17 00:00:00 2001 From: Owen Buckley Date: Sat, 26 Mar 2022 19:58:07 -0400 Subject: [PATCH 3/3] document polyfill feature --- packages/plugin-renderer-lit/README.md | 27 +++++++++++++++++++++++--- 1 file changed, 24 insertions(+), 3 deletions(-) diff --git a/packages/plugin-renderer-lit/README.md b/packages/plugin-renderer-lit/README.md index b7d085785..b7e253dd0 100644 --- a/packages/plugin-renderer-lit/README.md +++ b/packages/plugin-renderer-lit/README.md @@ -43,7 +43,7 @@ export default { ... plugins: [ - greenwoodPluginRendererLit() + ...greenwoodPluginRendererLit() // mind the spread! ] } ``` @@ -106,11 +106,32 @@ export default { ... plugins: [ - greenwoodPluginRendererLit({ + ...greenwoodPluginRendererLit({ prerender: true }) ] } ``` -> _Keep in mind you will need to make sure your Lit Web Components are isomorphic and [properly leveraging `LitElement`'s lifecycles](https://github.com/lit/lit/tree/main/packages/labs/ssr#notes-and-limitations) and browser / Node APIs accordingly for maximum compatibility and portability._ \ No newline at end of file +> _Keep in mind you will need to make sure your Lit Web Components are isomorphic and [properly leveraging `LitElement`'s lifecycles](https://github.com/lit/lit/tree/main/packages/labs/ssr#notes-and-limitations) and browser / Node APIs accordingly for maximum compatibility and portability._ + +### Polyfill + +If using the `prerender` feature, you'll need a polyfill to support browsers that don't understand Declarative Shadow DOM, which is the technique Lit uses when server rendering Web Components. + +This option will append [this polyfill script](https://web.dev/declarative-shadow-dom/#polyfill) before the closing `` tag which will make the inert `