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
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/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..3617b8b5 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';
+// import { fixture } from '@open-wc/testing-helpers';
+// import { html } from '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;
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());