-
-
Notifications
You must be signed in to change notification settings - Fork 9
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Add synchronous tags: htmlSync(), htmlFragmentSync(), close #50
- Loading branch information
Showing
8 changed files
with
255 additions
and
46 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| import type { | ||
| parse, | ||
| parseFragment, | ||
| serialize, | ||
| } from 'parse5'; | ||
| import { processLiteralsSync } from './process-literals-sync.js'; | ||
|
|
||
| export function parseLiteralsSync(serializeFn: typeof serialize) { | ||
| return ( | ||
| fn: typeof parse | typeof parseFragment, | ||
| strings: TemplateStringsArray, | ||
| ...exps: any[] | ||
| ) => { | ||
| const content = processLiteralsSync(strings, ...exps); | ||
| return serializeFn(fn(content)); | ||
| }; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| export function processLiteralsSync( | ||
| strings: TemplateStringsArray, | ||
| ...exps: any[] | ||
| ): string { | ||
| const done = exps.map((n) => { | ||
| return (Array.isArray(n) ? n : [n]).map(o => 'function' === typeof(o) ? o() : o); | ||
| }); | ||
| const doneLen = done.length; | ||
|
|
||
| return strings.reduce((p, n, i) => { | ||
| const nTask = done[i] ; | ||
| const joined = Array.isArray(nTask) ? nTask.join('') : nTask; | ||
| return `${p}${i >= doneLen ? n : `${n}${joined}`}`; | ||
| }, ''); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,79 @@ | ||
| import { htmlFragmentSync as html } from '..'; | ||
|
|
||
| const helloWorld = `<h1>Hello, World!</h1>`; | ||
| const peopleList = [ | ||
| 'John Doe', | ||
| 'Michael CEO', | ||
| 'Vict Fisherman', | ||
| 'Cash Black', | ||
| ]; | ||
|
|
||
| it(`throws when error happens`, () => { | ||
| try { | ||
| // tslint:disable-next-line: no-unused-expression | ||
| html`${() => { throw new Error('error'); }}`; | ||
| } catch (e) { | ||
| expect(e).toStrictEqual(new Error('error')); | ||
| } | ||
| }); | ||
|
|
||
| it(`renders`, () => { | ||
| const d = html`${helloWorld}`; | ||
|
|
||
| expect(d).toStrictEqual( | ||
| `<h1>Hello, World!</h1>` | ||
| ); | ||
| }); | ||
|
|
||
| it(`renders with sync tasks`, () => { | ||
| const syncTask = () => helloWorld; | ||
| const syncLiteral = 'John Doe'; | ||
| const d = html`<section>${syncTask}<h2>${syncLiteral}</h2></section>`; | ||
|
|
||
| expect(d).toStrictEqual( | ||
| // tslint:disable-next-line: max-line-length | ||
| `<section><h1>Hello, World!</h1><h2>John Doe</h2></section>` | ||
| ); | ||
| }); | ||
|
|
||
| it(`renders with async tasks`, () => { | ||
| const asyncTask = async () => helloWorld; | ||
| const asyncLiteral = Promise.resolve('John Doe'); | ||
| const d = html`<section>${asyncTask}<h2>${asyncLiteral}</h2></section>`; | ||
|
|
||
| expect(d).toStrictEqual( | ||
| // tslint:disable-next-line: max-line-length | ||
| `<section>[object Promise]<h2>[object Promise]</h2></section>` | ||
| ); | ||
| }); | ||
|
|
||
| it(`renders with a mixture of sync + async tasks`, async () => { | ||
| const asyncTask = () => helloWorld; | ||
| const syncLiteral = await 'John Doe'; | ||
| const d = html`<section>${asyncTask}<h2>${syncLiteral}</h2></section>`; | ||
|
|
||
| expect(d).toStrictEqual( | ||
| // tslint:disable-next-line: max-line-length | ||
| `<section><h1>Hello, World!</h1><h2>John Doe</h2></section>` | ||
| ); | ||
| }); | ||
|
|
||
| it(`renders a list of sync tasks`, () => { | ||
| const d = html`${helloWorld}<ul>${peopleList.map(n => `<li>${n}</li>`)}</ul>`; | ||
|
|
||
| expect(d).toStrictEqual( | ||
| // tslint:disable-next-line: max-line-length | ||
| `<h1>Hello, World!</h1><ul><li>John Doe</li><li>Michael CEO</li><li>Vict Fisherman</li><li>Cash Black</li></ul>` | ||
| ); | ||
| }); | ||
|
|
||
| it(`renders external style`, () => { | ||
| // tslint:disable-next-line: max-line-length | ||
| const asyncExternalStyleTask = () => html/* css */`body { margin: 0; padding: 0; box-sizing: border-box; }`; | ||
| const d = html`<style>${asyncExternalStyleTask}</style>${helloWorld}`; | ||
|
|
||
| expect(d).toStrictEqual( | ||
| // tslint:disable-next-line: max-line-length | ||
| `<style>body { margin: 0; padding: 0; box-sizing: border-box; }</style><h1>Hello, World!</h1>` | ||
| ); | ||
| }); |
Oops, something went wrong.