From 045b71c939b567525318fe287128a346d678b9ae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Bentkowski?= Date: Tue, 27 Dec 2022 05:26:54 +0100 Subject: [PATCH 1/4] Make the title less misleading. --- index.html | 2 +- src/components/Hero.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 032da0c..6fc9ca7 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - LiveDOM.NG + LiveDOM NG
diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx index c73e221..20ed8e6 100644 --- a/src/components/Hero.tsx +++ b/src/components/Hero.tsx @@ -9,7 +9,7 @@ function Hero() { class="col-span-1 mt-2 shadow-2xl rounded-full h-[140px] border-8 border-slate-300" />

- LiveDOM.NG + LiveDOM NG

From e1f8b50752ee5cb493ddcd946affac19f898ad9e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Bentkowski?= Date: Tue, 27 Dec 2022 15:11:51 +0100 Subject: [PATCH 2/4] Change key in array for TreeChildren --- src/tree-components/TreeChildren.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/tree-components/TreeChildren.tsx b/src/tree-components/TreeChildren.tsx index 1f9a2eb..742593c 100644 --- a/src/tree-components/TreeChildren.tsx +++ b/src/tree-components/TreeChildren.tsx @@ -2,7 +2,7 @@ import { TreeDocumentFragment } from "./TreeDocumentFragment"; import { TreeNode } from "./TreeNode"; function getKeyForChildNode(child: ChildNode, index: number) { - return `${child.nodeName} ${index}`; + return `${child.nodeName} ${child.nodeType} ${index}`; } function getContentDocument(node: Node): Document | null { From 8adcf2435b28ebaac67d80267608904e8add2576 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Bentkowski?= Date: Tue, 27 Dec 2022 17:15:42 +0100 Subject: [PATCH 3/4] Add single row display --- src/components/Outputs.tsx | 46 ++++++++++++++++--------- src/functions/display.ts | 39 ++++++++++++++++----- src/iframe-code.js | 10 +++++- src/parsers/03iframe-with-scripts.js | 26 +++++++++++--- src/parsers/04iframe-without-scripts.js | 14 -------- src/types.ts | 9 +++-- 6 files changed, 97 insertions(+), 47 deletions(-) delete mode 100644 src/parsers/04iframe-without-scripts.js diff --git a/src/components/Outputs.tsx b/src/components/Outputs.tsx index e484a83..803c708 100644 --- a/src/components/Outputs.tsx +++ b/src/components/Outputs.tsx @@ -3,29 +3,43 @@ import { TreeNode } from "../tree-components/TreeNode"; import type { Output } from "../types"; type Props = { - outputs: Output[]; + outputs: (Output | Output[])[]; ignoreEmptyTextNodes: boolean; withNamespaces: boolean; }; function Outputs({ outputs, ignoreEmptyTextNodes, withNamespaces }: Props) { return (
- {outputs.map(({ content, title }) => { + {outputs.map((output) => { + const row = Array.isArray(output) ? output : [output]; + console.log(row); + return ( -
- {title &&
{title}
} - {typeof content === "string" ? ( -
{content}
- ) : ( -
    - -
- )} +
+ {row.map(({ content, title }) => { + return ( +
+ {title &&
{title}
} + {typeof content === "string" ? ( +
{content}
+ ) : ( +
    + +
+ )} +
+ ); + })}
); })} diff --git a/src/functions/display.ts b/src/functions/display.ts index a10ffbc..f2cf8ea 100644 --- a/src/functions/display.ts +++ b/src/functions/display.ts @@ -1,11 +1,32 @@ -import type { DisplayDetail, Output } from "../types"; - -export function display(detail: DisplayDetail): Output { - if (Array.isArray(detail)) { - return { - content: detail[0], - title: detail[1], - }; +import type { + DisplayClassicArgs, + DisplayDetail, + DisplayRowArgs, + Output, +} from "../types"; + +type DisplayClassic = (...args: DisplayClassicArgs) => Output; +const displayClassic: DisplayClassic = (content, title) => { + return { content, title }; +}; + +type DisplayRow = (...args: DisplayRowArgs) => Output[]; +const displayRow: DisplayRow = (...columns) => { + return columns.map((args) => { + const content = Array.isArray(args) ? args[0] : args; + const title = Array.isArray(args) ? args[1] : undefined; + + return { content, title }; + }); +}; + +export function display(detail: DisplayDetail): Output | Output[] { + switch (detail.type) { + case "classic": + return displayClassic(...detail.args); + case "row": + return displayRow(...detail.args); + default: + throw new Error("Not implemented"); } - throw new Error("Not implemented"); } diff --git a/src/iframe-code.js b/src/iframe-code.js index 31c1e77..3ed3909 100644 --- a/src/iframe-code.js +++ b/src/iframe-code.js @@ -1,5 +1,13 @@ function display(...args) { - const event = new CustomEvent("display", { detail: args }); + const event = new CustomEvent("display", { + detail: { args, type: "classic" }, + }); + parent.dispatchEvent(event); +} +function displayRow(...args) { + const event = new CustomEvent("display", { + detail: { args, type: "row" }, + }); parent.dispatchEvent(event); } diff --git a/src/parsers/03iframe-with-scripts.js b/src/parsers/03iframe-with-scripts.js index 1b46ea8..3f8f1f3 100644 --- a/src/parsers/03iframe-with-scripts.js +++ b/src/parsers/03iframe-with-scripts.js @@ -1,13 +1,29 @@ -// name: iframe srcdoc (scripting enabled) +// name: iframe (with scripts vs without scripts) class LiveDomParser { init() { - this.iframe = document.createElement("iframe"); - document.body.appendChild(this.iframe); + this.iframe1 = document.createElement("iframe"); + document.body.appendChild(this.iframe1); + this.iframe2 = document.createElement("iframe"); + document.body.appendChild(this.iframe2); + + this.iframe2.sandbox = ["allow-same-origin"]; + document.body.append(this.iframe1, this.iframe2); + this.loaded = 0; + const onload = () => { + this.loaded++; + if (this.loaded < 2) return; + displayRow( + [this.iframe1.contentDocument ?? "", "iframe with scripts"], + [this.iframe2.contentDocument ?? "", "iframe without scripts"] + ); + }; + this.iframe1.onload = this.iframe2.onload = onload; } /** @param {string} s */ parse(s) { - this.iframe.srcdoc = s; - this.iframe.onload = () => display(this.iframe.contentDocument); + this.loaded = 0; + this.iframe1.srcdoc = s; + this.iframe2.srcdoc = s; } } diff --git a/src/parsers/04iframe-without-scripts.js b/src/parsers/04iframe-without-scripts.js deleted file mode 100644 index b6108f6..0000000 --- a/src/parsers/04iframe-without-scripts.js +++ /dev/null @@ -1,14 +0,0 @@ -// name: iframe srcdoc (scripting disabled) -class LiveDomParser { - init() { - this.iframe = document.createElement("iframe"); - this.iframe.setAttribute("sandbox", "allow-same-origin"); - document.body.append(this.iframe); - } - - /** @param {string} s */ - parse(s) { - this.iframe.srcdoc = s; - this.iframe.onload = () => display(this.iframe.contentDocument); - } -} diff --git a/src/types.ts b/src/types.ts index a854df7..22d24fa 100644 --- a/src/types.ts +++ b/src/types.ts @@ -8,7 +8,7 @@ export type Output = { export type GlobalState = { input: string; parserCode: string; - outputs: Output[]; + outputs: (Output | Output[])[]; withNamespaces: boolean; ignoreEmptyTextNodes: boolean; }; @@ -33,4 +33,9 @@ export type ParserMenuItem = { export type LocalStorageValues = Omit; -export type DisplayDetail = [Node | string, (string | undefined)?]; +export type DisplayClassicArgs = [Node | string, (string | undefined)?]; +//export type DisplayRowArgs = {content: Node | string, title?: string | undefined}[]; +export type DisplayRowArgs = (Node | string | DisplayClassicArgs)[]; +export type DisplayDetail = + | { type: "classic"; args: DisplayClassicArgs } + | { type: "row"; args: DisplayRowArgs }; From 7d7f8e95d0ddefbc4cb34c0c922570400da9196b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Bentkowski?= Date: Tue, 27 Dec 2022 17:17:34 +0100 Subject: [PATCH 4/4] Fix build error --- src/functions/useGlobalState.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/functions/useGlobalState.tsx b/src/functions/useGlobalState.tsx index 890b893..3d62e5c 100644 --- a/src/functions/useGlobalState.tsx +++ b/src/functions/useGlobalState.tsx @@ -5,7 +5,9 @@ export function useGlobalState( defaultValues: GlobalState ): GlobalStateWithUpdaters { const [input, setInput] = useState(defaultValues.input); - const [outputs, setOutputs] = useState(defaultValues.outputs); + const [outputs, setOutputs] = useState<(Output | Output[])[]>( + defaultValues.outputs + ); const [withNamespaces, setWithNamespaces] = useState( defaultValues.withNamespaces );