From e511e13b5ffb8d4406242342a49898d5cf8f1e94 Mon Sep 17 00:00:00 2001 From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com> Date: Mon, 13 May 2024 12:33:53 -0700 Subject: [PATCH 1/3] Add renderLit export to render-component --- package-lock.json | 142 +++++++++++++++++++++++++++++++++++++ package.json | 2 + render-component.d.ts | 5 ++ source/render-component.js | 16 ++++- 4 files changed, 162 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index f1bff13f..a9d89589 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,8 +9,10 @@ "version": "8.0.0-RC4", "license": "MIT", "dependencies": { + "@open-wc/testing-helpers": "^3.0.1", "cheerio": "1.0.0-rc.12", "esm": "3.2.25", + "lit": "^3.1.3", "react-dom": "18.2.0", "tape": "^5.7.4", "vitest": "^1.2.1" @@ -2425,6 +2427,19 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, + "node_modules/@lit-labs/ssr-dom-shim": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.2.0.tgz", + "integrity": "sha512-yWJKmpGE6lUURKAaIltoPIE/wrbY3TEkqQt+X0m+7fQNnAv0keydnYvbiJFP1PnMhizmIWRWOG5KLhYyc/xl+g==" + }, + "node_modules/@lit/reactive-element": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-2.0.4.tgz", + "integrity": "sha512-GFn91inaUa2oHLak8awSIigYz0cU0Payr1rcFsrkf5OJ5eSPxElyZfKh0f2p9FsTiZWXQdWGJeXZICEfXXYSXQ==", + "dependencies": { + "@lit-labs/ssr-dom-shim": "^1.2.0" + } + }, "node_modules/@ljharb/resumer": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/@ljharb/resumer/-/resumer-0.0.1.tgz", @@ -2637,6 +2652,30 @@ "@octokit/openapi-types": "^19.1.0" } }, + "node_modules/@open-wc/dedupe-mixin": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/@open-wc/dedupe-mixin/-/dedupe-mixin-1.4.0.tgz", + "integrity": "sha512-Sj7gKl1TLcDbF7B6KUhtvr+1UCxdhMbNY5KxdU5IfMFWqL8oy1ZeAcCANjoB1TL0AJTcPmcCFsCbHf8X2jGDUA==" + }, + "node_modules/@open-wc/scoped-elements": { + "version": "3.0.5", + "resolved": "https://registry.npmjs.org/@open-wc/scoped-elements/-/scoped-elements-3.0.5.tgz", + "integrity": "sha512-q4U+hFTQQRyorJILOpmBm6PY2hgjCnQe214nXJNjbJMQ9EvT55oyZ7C8BY5aFYJkytUyBoawlMpZt4F2xjdzHw==", + "dependencies": { + "@open-wc/dedupe-mixin": "^1.4.0", + "lit": "^3.0.0" + } + }, + "node_modules/@open-wc/testing-helpers": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@open-wc/testing-helpers/-/testing-helpers-3.0.1.tgz", + "integrity": "sha512-hyNysSatbgT2FNxHJsS3rGKcLEo6+HwDFu1UQL6jcSQUabp/tj3PyX7UnXL3H5YGv0lJArdYLSnvjLnjn3O2fw==", + "dependencies": { + "@open-wc/scoped-elements": "^3.0.2", + "lit": "^2.0.0 || ^3.0.0", + "lit-html": "^2.0.0 || ^3.0.0" + } + }, "node_modules/@pnpm/config.env-replace": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@pnpm/config.env-replace/-/config.env-replace-1.1.0.tgz", @@ -2933,6 +2972,11 @@ "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==", "dev": true }, + "node_modules/@types/trusted-types": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz", + "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==" + }, "node_modules/@ungap/structured-clone": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz", @@ -6964,6 +7008,34 @@ "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==", "dev": true }, + "node_modules/lit": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/lit/-/lit-3.1.3.tgz", + "integrity": "sha512-l4slfspEsnCcHVRTvaP7YnkTZEZggNFywLEIhQaGhYDczG+tu/vlgm/KaWIEjIp+ZyV20r2JnZctMb8LeLCG7Q==", + "dependencies": { + "@lit/reactive-element": "^2.0.4", + "lit-element": "^4.0.4", + "lit-html": "^3.1.2" + } + }, + "node_modules/lit-element": { + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-4.0.5.tgz", + "integrity": "sha512-iTWskWZEtn9SyEf4aBG6rKT8GABZMrTWop1+jopsEOgEcugcXJGKuX5bEbkq9qfzY+XB4MAgCaSPwnNpdsNQ3Q==", + "dependencies": { + "@lit-labs/ssr-dom-shim": "^1.2.0", + "@lit/reactive-element": "^2.0.4", + "lit-html": "^3.1.2" + } + }, + "node_modules/lit-html": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.1.3.tgz", + "integrity": "sha512-FwIbqDD8O/8lM4vUZ4KvQZjPPNx7V1VhT7vmRB8RBAO0AU6wuTVdoXiu2CivVjEGdugvcbPNBLtPE1y0ifplHA==", + "dependencies": { + "@types/trusted-types": "^2.0.2" + } + }, "node_modules/local-pkg": { "version": "0.5.0", "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.5.0.tgz", @@ -12335,6 +12407,19 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, + "@lit-labs/ssr-dom-shim": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.2.0.tgz", + "integrity": "sha512-yWJKmpGE6lUURKAaIltoPIE/wrbY3TEkqQt+X0m+7fQNnAv0keydnYvbiJFP1PnMhizmIWRWOG5KLhYyc/xl+g==" + }, + "@lit/reactive-element": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-2.0.4.tgz", + "integrity": "sha512-GFn91inaUa2oHLak8awSIigYz0cU0Payr1rcFsrkf5OJ5eSPxElyZfKh0f2p9FsTiZWXQdWGJeXZICEfXXYSXQ==", + "requires": { + "@lit-labs/ssr-dom-shim": "^1.2.0" + } + }, "@ljharb/resumer": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/@ljharb/resumer/-/resumer-0.0.1.tgz", @@ -12494,6 +12579,30 @@ "@octokit/openapi-types": "^19.1.0" } }, + "@open-wc/dedupe-mixin": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/@open-wc/dedupe-mixin/-/dedupe-mixin-1.4.0.tgz", + "integrity": "sha512-Sj7gKl1TLcDbF7B6KUhtvr+1UCxdhMbNY5KxdU5IfMFWqL8oy1ZeAcCANjoB1TL0AJTcPmcCFsCbHf8X2jGDUA==" + }, + "@open-wc/scoped-elements": { + "version": "3.0.5", + "resolved": "https://registry.npmjs.org/@open-wc/scoped-elements/-/scoped-elements-3.0.5.tgz", + "integrity": "sha512-q4U+hFTQQRyorJILOpmBm6PY2hgjCnQe214nXJNjbJMQ9EvT55oyZ7C8BY5aFYJkytUyBoawlMpZt4F2xjdzHw==", + "requires": { + "@open-wc/dedupe-mixin": "^1.4.0", + "lit": "^3.0.0" + } + }, + "@open-wc/testing-helpers": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@open-wc/testing-helpers/-/testing-helpers-3.0.1.tgz", + "integrity": "sha512-hyNysSatbgT2FNxHJsS3rGKcLEo6+HwDFu1UQL6jcSQUabp/tj3PyX7UnXL3H5YGv0lJArdYLSnvjLnjn3O2fw==", + "requires": { + "@open-wc/scoped-elements": "^3.0.2", + "lit": "^2.0.0 || ^3.0.0", + "lit-html": "^2.0.0 || ^3.0.0" + } + }, "@pnpm/config.env-replace": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@pnpm/config.env-replace/-/config.env-replace-1.1.0.tgz", @@ -12690,6 +12799,11 @@ "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==", "dev": true }, + "@types/trusted-types": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz", + "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==" + }, "@ungap/structured-clone": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz", @@ -15524,6 +15638,34 @@ "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==", "dev": true }, + "lit": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/lit/-/lit-3.1.3.tgz", + "integrity": "sha512-l4slfspEsnCcHVRTvaP7YnkTZEZggNFywLEIhQaGhYDczG+tu/vlgm/KaWIEjIp+ZyV20r2JnZctMb8LeLCG7Q==", + "requires": { + "@lit/reactive-element": "^2.0.4", + "lit-element": "^4.0.4", + "lit-html": "^3.1.2" + } + }, + "lit-element": { + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-4.0.5.tgz", + "integrity": "sha512-iTWskWZEtn9SyEf4aBG6rKT8GABZMrTWop1+jopsEOgEcugcXJGKuX5bEbkq9qfzY+XB4MAgCaSPwnNpdsNQ3Q==", + "requires": { + "@lit-labs/ssr-dom-shim": "^1.2.0", + "@lit/reactive-element": "^2.0.4", + "lit-html": "^3.1.2" + } + }, + "lit-html": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.1.3.tgz", + "integrity": "sha512-FwIbqDD8O/8lM4vUZ4KvQZjPPNx7V1VhT7vmRB8RBAO0AU6wuTVdoXiu2CivVjEGdugvcbPNBLtPE1y0ifplHA==", + "requires": { + "@types/trusted-types": "^2.0.2" + } + }, "local-pkg": { "version": "0.5.0", "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.5.0.tgz", diff --git a/package.json b/package.json index 297d79a5..5407b81c 100644 --- a/package.json +++ b/package.json @@ -68,8 +68,10 @@ "watch": "^0.13.0" }, "dependencies": { + "@open-wc/testing-helpers": "^3.0.1", "cheerio": "1.0.0-rc.12", "esm": "3.2.25", + "lit": "^3.1.3", "react-dom": "18.2.0", "tape": "^5.7.4", "vitest": "^1.2.1" diff --git a/render-component.d.ts b/render-component.d.ts index ae12c6b6..3dca124a 100644 --- a/render-component.d.ts +++ b/render-component.d.ts @@ -1,6 +1,11 @@ /// /// +/// + +import { TemplateResult } from "lit"; declare module 'riteway/render-component' { + export function renderLit(el: TemplateResult): cheerio.Root; + export function renderReact(el: JSX.Element): cheerio.Root; export default function render(el: JSX.Element): cheerio.Root; } diff --git a/source/render-component.js b/source/render-component.js index 44cd94a9..c02b7924 100644 --- a/source/render-component.js +++ b/source/render-component.js @@ -1,8 +1,18 @@ import reactDom from 'react-dom/server'; import dom from 'cheerio'; +const { fixture } = require('@open-wc/testing-helpers'); +const { html } = require('lit'); -const render = component => - dom.load(reactDom.renderToStaticMarkup(component)); +export const renderLit = async (template) => { + const el = await fixture(html`${template}`); + await el.updateComplete; // Wait for the component to finish rendering + if (el.shadowRoot) { + return dom.load(el.shadowRoot.innerHTML); + } + return dom.load(el.innerHTML); +}; -export default render; +export const renderReact = (component) => + dom.load(reactDom.renderToStaticMarkup(component)); +export default renderReact; From 5b7427ca2a225d127ef1611d422d2b1186641499 Mon Sep 17 00:00:00 2001 From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com> Date: Mon, 13 May 2024 12:43:15 -0700 Subject: [PATCH 2/3] Update README.md --- README.md | 31 +++++++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) diff --git a/README.md b/README.md index e956e0bc..f0856cb1 100644 --- a/README.md +++ b/README.md @@ -455,6 +455,8 @@ First, import `render` from `riteway/render-component`: ```js import render from 'riteway/render-component'; +// or you can also use renderReact (which is the same as the default export) +import { renderReact } from 'riteway/render-component'; ``` ```js @@ -478,6 +480,35 @@ describe('MyComponent', async assert => { }); ``` +### Render Lit + +To use this, import `renderLit` from `riteway/render-component`: + +```js +import { renderLit } from 'riteway/render-component'; +``` + +```js +renderLit = (TemplateResult) => CheerioObject +``` + +Take a [TemplateResult](https://lit.dev/docs/v1/api/lit-html/templates/#TemplateResult) Lit type and returns a [Cheerio object](https://cheerio.js.org/), that can be used in the exact same way as aforementioned default `render` function which is specifically for React. + +#### Example + +```js +describe('MyComponent', async assert => { + const $ = renderLit(html`
Test
`); + + assert({ + given: 'no params', + should: 'render something with the my-component class', + actual: $('.my-component').length, + expected: 1 + }); +}); +``` + ## Match From 0c419d0af806bda8a522bd5712530fc8ea995225 Mon Sep 17 00:00:00 2001 From: Geireann Lindfield Roberts Date: Mon, 10 Jun 2024 10:35:07 -0700 Subject: [PATCH 3/3] update to latest --- esm/test.js | 23 ++++++++++++++++++++++- source/render-component.js | 20 ++++++++++---------- source/test.js | 17 +++++++++++++++-- 3 files changed, 47 insertions(+), 13 deletions(-) diff --git a/esm/test.js b/esm/test.js index e373f014..ee329c78 100644 --- a/esm/test.js +++ b/esm/test.js @@ -142,6 +142,26 @@ describe('skip()', async assert => { }); } +{ + // @ts-ignore + // eslint-disable-next-line + + describe('renderLitComponent', async assert => { + const { html } = await import('lit'); + + const text = 'Test for whatever you like!'; + const $ = renderLit(html`
Text
`); + const contains = match($('.contents').html()); + + assert({ + given: 'A lit component', + should: 'return a working cheerio instance', + actual: contains(text), + expected: text + }); + }); +} + describe('countKeys()', async assert => { assert({ given: 'an object', @@ -151,4 +171,5 @@ describe('countKeys()', async assert => { }); }); -import './match-test'; +import './match-test';import { renderLit } from '../source/render-component'; + diff --git a/source/render-component.js b/source/render-component.js index c02b7924..3617b8b5 100644 --- a/source/render-component.js +++ b/source/render-component.js @@ -1,16 +1,16 @@ import reactDom from 'react-dom/server'; import dom from 'cheerio'; -const { fixture } = require('@open-wc/testing-helpers'); -const { html } = require('lit'); +// import { fixture } from '@open-wc/testing-helpers'; +// import { html } from 'lit'; -export const renderLit = async (template) => { - const el = await fixture(html`${template}`); - await el.updateComplete; // Wait for the component to finish rendering - if (el.shadowRoot) { - return dom.load(el.shadowRoot.innerHTML); - } - return dom.load(el.innerHTML); -}; +// export const renderLit = async (template) => { +// const el = await fixture(html`${template}`); +// await el.updateComplete; // Wait for the component to finish rendering +// if (el.shadowRoot) { +// return dom.load(el.shadowRoot.innerHTML); +// } +// return dom.load(el.innerHTML); +// }; export const renderReact = (component) => dom.load(reactDom.renderToStaticMarkup(component)); diff --git a/source/test.js b/source/test.js index e373f014..3ccecbcf 100644 --- a/source/test.js +++ b/source/test.js @@ -3,7 +3,7 @@ import tape from 'tape'; import { describe, Try, createStream, countKeys } from './riteway'; import match from './match'; -import render from './render-component'; +import render, { renderReact } from './render-component'; // a function to test const sum = (...args) => { @@ -128,7 +128,20 @@ describe('skip()', async assert => { // eslint-disable-next-line const MyComponent = ({text}) =>
{text}
; - describe('renderComponent', async assert => { + describe('renderComponent: renderRecat', async assert => { + const text = 'Test for whatever you like!'; + const $ = renderReact(); + const contains = match($('.contents').html()); + + assert({ + given: 'A react component', + should: 'return a working cheerio instance', + actual: contains(text), + expected: text + }); + }); + + describe('renderComponent: default export', async assert => { const text = 'Test for whatever you like!'; const $ = render(); const contains = match($('.contents').html());