nodoku-core 0.2.4 → 0.2.6

package/esm/bin/generate-component-resolver.js

@@ -17,7 +17,7 @@ function calculateTemplateView(dirNodeModules = undefined) {
         dirNodeModules = `${path.resolve()}/node_modules`;
     }
     const manifests = loadManifestsFromFolder(dirNodeModules);
-    const view = { modules: [], comps: [] };
+    const view = { modules: [], comps: [], clSideComps: [] };
     manifests.forEach((m, k) => {
         let prefix = "";
         if (m.namespace) {
@@ -35,9 +35,22 @@ function calculateTemplateView(dirNodeModules = undefined) {
             else {
                 nb = `${cd.numBlocks}`;
             }
-            view.comps.push({ name: cn, impl: `${prefix}${cd.implementation}`, defaultThemeFile: "./" + path.relative(path.resolve("."), path.resolve("./schemas", m.moduleName, cd.defaultThemeFile)).replaceAll("\\", "/"), numBlocks: nb });
+            view.comps.push({
+                name: cn,
+                impl: `${prefix}${cd.implementation}`,
+                defaultThemeFile: "./" + path.relative(path.resolve("."), path.resolve("./schemas", m.moduleName, cd.defaultThemeFile)).replaceAll("\\", "/"),
+                numBlocks: nb
+            });
+            if (cd.clientSideComps) {
+                cd.clientSideComps.forEach(cl => {
+                    view.clSideComps.push({ n: `${cn}:${cl}`, isLast: false });
+                });
+            }
         });
     });
+    if (view.clSideComps && view.clSideComps.length > 0) {
+        view.clSideComps[view.clSideComps.length - 1].isLast = true;
+    }
     return view;
 }
 export function generateComponentResolver() {

package/esm/bin/manifest-loader.js

@@ -48,7 +48,8 @@ function loadComponentsByManifest(dir, moduleName) {
                         themeSchema: v.schemaFile,
                         optionsSchema: v.optionsFile,
                         defaultThemeFile: v.defaultThemeFile,
-                        numBlocks: v.numBlocks
+                        numBlocks: v.numBlocks,
+                        clientSideComps: v.clientSideComps
                     });
                 });
                 return manifest;

package/esm/bin/mustache/component-resolver.ts.hbs

@@ -10,6 +10,29 @@ const components: Map<string, {compo: AsyncFunctionComponent, compoDef: NdCompon
 components.set("{{{name}}}", {compo: {{impl}}, compoDef: new NdComponentDefinition({{{numBlocks}}}, "{{{defaultThemeFile}}}")});
 {{/comps}}
 
+{{^clSideComps.length}}
+export type ClientSideComponentNameEnum = void;
+{{/clSideComps.length}}
+
+{{#clSideComps.length}}
+export type ClientSideComponentNameEnum =
+{{#clSideComps.length}}
+    {{#clSideComps}}
+        "{{{n}}}"{{^isLast}} | {{/isLast}}{{#isLast}};{{/isLast}}
+    {{/clSideComps}}
+{{/clSideComps.length}}
+
+export const fromStringToClientSideComponentNameEnum = (c: string): ClientSideComponentNameEnum | undefined => {
+{{#clSideComps}}
+    if (c === "{{{n}}}") {
+        return "{{{n}}}";
+    }
+{{/clSideComps}}
+    return undefined;
+}
+
+{{/clSideComps.length}}
+
 export async function nodokuComponentResolver(componentName: string): Promise<{compo: AsyncFunctionComponent, compoDef: NdComponentDefinition}> {
     const f: {compo: AsyncFunctionComponent, compoDef: NdComponentDefinition} | undefined = components.get(componentName);
     return f ? f : {compo: DummyComp, compoDef: new NdComponentDefinition(1)};

package/esm/content/nd-content.js

@@ -41,6 +41,14 @@ export class NdCode {
         this.code = code;
     }
 }
+export class NdLink {
+    urlText;
+    url;
+    constructor(text, url) {
+        this.urlText = text;
+        this.url = url;
+    }
+}
 export class NdContentBlock {
     id;
     lng;

package/esm/core/dummy-comp.jsx

@@ -1,4 +1,5 @@
 import { NdCode, NdTranslatableText } from "../content/nd-content";
+import { NdLink } from "../content/nd-content";
 export async function DummyComp(props) {
     // console.log("content dummy comp", props.theme)
     const { content, i18nextTrustedHtmlProvider, lng, rowIndex, componentIndex } = props;
@@ -27,37 +28,7 @@ async function render(rowIndex, componentIndex, block, t) {
                 </h6>}
 
                 paragraphs:
-                {await Promise.all(block.paragraphs.map(async (p, ip) => {
-            if (p instanceof NdTranslatableText) {
-                return (<div>
-                                {p && p.key}
-                                <p key={ip} className={"mb-3 font-normal text-gray-700 dark:text-gray-400"}>
-                                    {p && t(p).__html}
-                                </p>
-                            </div>);
-            }
-            else if (p instanceof NdCode) {
-                const code = p;
-                return (<div className={"border border-gray-200 p-4"}>
-                                <pre className={"text-pretty"}>
-                                    <code lang={code.lang} className={"hljs"} dangerouslySetInnerHTML={{ __html: code.code }}/>
-                                </pre>
-                            </div>);
-            }
-            else {
-                const list = p;
-                if (list.ordered) {
-                    return (<ol className={"list-disc list-outside"}>
-                                    {list.items.map(i => <li className={"ml-4"}>{t(i).__html} <small>(<i>{i.key}</i>)</small></li>)}
-                                </ol>);
-                }
-                else {
-                    return (<ul className={"list-disc list-outside"}>
-                                    {list.items.map(i => <li className={"ml-4"}>{t(i).__html} <small>(<i>{i.key}</i>)</small></li>)}
-                                </ul>);
-                }
-            }
-        }))}
+                {await Promise.all(block.paragraphs.map(async (p, ip) => renderParagraph(p, ip)))}
                 images:
                 {block.images.map((img, ii) => {
             return (<div>
@@ -88,4 +59,60 @@ async function render(rowIndex, componentIndex, block, t) {
             </div>
 
         </div>);
+    function renderParagraph(p, ip) {
+        if (p instanceof NdTranslatableText) {
+            return (<div>
+                    {p && p.key}
+                    <p key={ip} className={"mb-3 font-normal text-gray-700 dark:text-gray-400"}>
+                        {p && t(p).__html}
+                    </p>
+                </div>);
+        }
+        else if (p instanceof NdCode) {
+            const code = p;
+            return (<div className={"border border-gray-200 p-4"}>
+                                <pre className={"text-pretty"}>
+                                    <code lang={code.lang} className={"hljs"} dangerouslySetInnerHTML={{ __html: code.code }}/>
+                                </pre>
+                </div>);
+        }
+        else if (p instanceof NdLink) {
+            const link = p;
+            return (<div>
+                    link
+                    <div key={ip} className={"mb-3 font-normal text-gray-700 dark:text-gray-400"}>
+                        urlText: {link.urlText && showTranslatableText(link.urlText)}
+                        url: {showTranslatableText(link.url)}
+                    </div>
+
+                </div>);
+        }
+        else {
+            const list = p;
+            if (list.ordered) {
+                return (<ol className={"list-disc list-outside"}>
+                        {list.items.map(i => <li className={"ml-4"}>
+                                {showListItem(i)}
+                                {i.subList && renderParagraph(i.subList, ip)}
+                            </li>)}
+                    </ol>);
+            }
+            else {
+                return (<ul className={"list-disc list-outside"}>
+                        {list.items.map(i => <li className={"ml-4"}>
+                                {showListItem(i)}
+                                {i.subList && renderParagraph(i.subList, ip)}
+                            </li>)}
+                    </ul>);
+            }
+        }
+    }
+}
+function showTranslatableText(text) {
+    return <span>{text.text} <small>(<i>{text.key}</i>)</small></span>;
+}
+function showListItem(i) {
+    return i.text instanceof NdTranslatableText ?
+        showTranslatableText(i.text) :
+        <span>link item {(i.text.urlText ? showTranslatableText(i.text.urlText) : "link text n/a")} : {showTranslatableText(i.text.url)}</span>;
 }

package/esm/core/rendering-page-props.js

@@ -25,7 +25,8 @@ export class RenderingPageProps {
     i18nextProvider = undefined;
     i18nextPostProcessor;
     htmlSanitizer;
-    constructor(lng, content, componentResolver, skin = undefined, renderingPriority = RenderingPriority.content_first, imageProvider = undefined, i18nextProvider = undefined, htmlSanitizer = undefined) {
+    clientSideComponentProvider;
+    constructor(lng, content, componentResolver, skin = undefined, renderingPriority = RenderingPriority.content_first, imageProvider = undefined, i18nextProvider = undefined, htmlSanitizer = undefined, clientSideComponentProvider = undefined) {
         this.lng = lng;
         this.renderingPriority = renderingPriority;
         this.content = content;
@@ -34,5 +35,6 @@ export class RenderingPageProps {
         this.imageProvider = imageProvider;
         this.i18nextProvider = i18nextProvider;
         this.htmlSanitizer = htmlSanitizer;
+        this.clientSideComponentProvider = clientSideComponentProvider;
     }
 }

package/esm/core/rendering-page.jsx

@@ -16,7 +16,7 @@ async function defaultImageProvider(imageProps) {
     return <img className={`${imageStyle?.base} ${imageStyle?.decoration}`} src={url} alt={alt}/>;
 }
 async function RenderingPage(props) {
-    const { lng, renderingPriority, content, componentResolver, skin, imageProvider, i18nextProvider, i18nextPostProcessor, htmlSanitizer } = props;
+    const { lng, renderingPriority, content, componentResolver, skin, imageProvider, i18nextProvider, i18nextPostProcessor, htmlSanitizer, clientSideComponentProvider } = props;
     const actualComponentResolver = componentResolver ? componentResolver : defaultComponentResolver;
     let l;
     if (skin) {
@@ -26,10 +26,10 @@ async function RenderingPage(props) {
         }
         // console.log(" >>> this is my content <<< ", content)
         // console.log(" >>> this is my skin <<< ", JSON.stringify(blockSkin))
-        l = await Promise.all(blockSkin.rows.map(async (row, iRow) => await createRow(row, iRow, content, lng, imageProvider, i18nextProvider, i18nextPostProcessor, actualComponentResolver, htmlSanitizer)));
+        l = await Promise.all(blockSkin.rows.map(async (row, iRow) => await createRow(row, iRow, content, lng, imageProvider, i18nextProvider, i18nextPostProcessor, actualComponentResolver, htmlSanitizer, clientSideComponentProvider)));
     }
     else {
-        l = [await createRow(undefined, 0, content, lng, imageProvider, i18nextProvider, i18nextPostProcessor, actualComponentResolver, htmlSanitizer)];
+        l = [await createRow(undefined, 0, content, lng, imageProvider, i18nextProvider, i18nextPostProcessor, actualComponentResolver, htmlSanitizer, clientSideComponentProvider)];
     }
     const actualSkin = mergeTheme(skin, { renderingPage: { base: "", decoration: "" }, rows: [] });
     return <div className={`rows-container ${ts(actualSkin, "renderingPage")}`}>{l}</div>;
@@ -66,13 +66,13 @@ function generateSkinByContentBlocks(blocks, skin) {
     // console.log("generated skin", JSON.stringify(res))
     return res;
 }
-async function createRow(row, iRow, blocks, lng, imageProvider, i18nProvider, i18nextPostProcessor, componentResolver, htmlSanitizer) {
+async function createRow(row, iRow, blocks, lng, imageProvider, i18nProvider, i18nextPostProcessor, componentResolver, htmlSanitizer, clientSideComponentProvider) {
     let l;
     if (row) {
-        l = await Promise.all(row.components.map(async (visualSection, iComp) => await createRowComponents(iRow, iComp, visualSection, blocks, lng, imageProvider, i18nProvider, i18nextPostProcessor, componentResolver, htmlSanitizer)));
+        l = await Promise.all(row.components.map(async (visualSection, iComp) => await createRowComponents(iRow, iComp, visualSection, blocks, lng, imageProvider, i18nProvider, i18nextPostProcessor, componentResolver, htmlSanitizer, clientSideComponentProvider)));
     }
     else {
-        l = await Promise.all(blocks.map(async (block, iComp) => await createRowComponents(iRow, iComp, undefined, [block], lng, imageProvider, i18nProvider, i18nextPostProcessor, componentResolver, htmlSanitizer)));
+        l = await Promise.all(blocks.map(async (block, iComp) => await createRowComponents(iRow, iComp, undefined, [block], lng, imageProvider, i18nProvider, i18nextPostProcessor, componentResolver, htmlSanitizer, clientSideComponentProvider)));
     }
     const rowComponents = l.flatMap((p) => p);
     if (rowComponents.length == 0) {
@@ -144,7 +144,7 @@ async function createRow(row, iRow, blocks, lng, imageProvider, i18nProvider, i1
                     </div>)}
         </div>);
 }
-async function createRowComponents(rowIndex, blockIndex, skinComponent, pageContent, lng, imageProvider, i18nProvider, i18nextPostProcessor, componentResolver, htmlSanitizer) {
+async function createRowComponents(rowIndex, blockIndex, skinComponent, pageContent, lng, imageProvider, i18nProvider, i18nextPostProcessor, componentResolver, htmlSanitizer, clientSideComponentProvider) {
     // console.log("before component", skinComponent)
     const filteredBlocks = skinComponent ? skinComponent.selector.filterBlocks(pageContent) : pageContent;
     if (filteredBlocks.length == 0) {
@@ -170,7 +170,7 @@ async function createRowComponents(rowIndex, blockIndex, skinComponent, pageCont
             const blocks = filteredBlocks.slice(start, end);
             const compIndex = blockIndex * filteredBlocks.length + i;
             // console.log("calculated compo index ", compIndex, "filteredBlocks.length", filteredBlocks.length, "blockIndex", blockIndex)
-            res.push(await renderSingleComponent(rowIndex, compIndex, compo, blocks, skinComponent?.defaultThemeName || "light", compoDef.defaultTheme, skinComponent?.themeHierarchy, lng, imageProvider, i18nProvider, i18nextPostProcessor, htmlSanitizer));
+            res.push(await renderSingleComponent(rowIndex, compIndex, compo, blocks, skinComponent?.defaultThemeName || "light", compoDef.defaultTheme, skinComponent?.themeHierarchy, lng, imageProvider, i18nProvider, i18nextPostProcessor, htmlSanitizer, clientSideComponentProvider));
         }
         start = end;
         ++i;
@@ -227,7 +227,7 @@ function makeTrusted(provider, sanitizer) {
         return { t: tt };
     };
 }
-async function renderSingleComponent(rowIndex, componentIndex, component, blocks, defaultThemeName, defaultTheme, themeHierarchy, lng, imageProvider, i18nextProvider, i18nextPostProcessor, htmlSanitizer) {
+async function renderSingleComponent(rowIndex, componentIndex, component, blocks, defaultThemeName, defaultTheme, themeHierarchy, lng, imageProvider, i18nextProvider, i18nextPostProcessor, htmlSanitizer, clientSideComponentProvider) {
     let actualI18nextProvider_;
     if (lng == blocks[0].lng || !i18nextProvider) {
         actualI18nextProvider_ = async (lng) => {
@@ -242,6 +242,7 @@ async function renderSingleComponent(rowIndex, componentIndex, component, blocks
     }
     const actualI18nextProvider = makeTrusted(wrapInPostProcessor(actualI18nextProvider_, i18nextPostProcessor), htmlSanitizer || ((text) => ({ __html: text })));
     const actualImageProvider = imageProvider ? imageProvider : defaultImageProvider;
+    const actualClientSideComponentProvider = clientSideComponentProvider ? clientSideComponentProvider : (c) => <span>[placeholder for: {c}]</span>;
     // if (themeHierarchy) {
     //     console.log("themeHierarchy", themeHierarchy)
     // }
@@ -257,7 +258,8 @@ async function renderSingleComponent(rowIndex, componentIndex, component, blocks
         options: effectiveOptions,
         lng: lng,
         imageProvider: actualImageProvider,
-        i18nextTrustedHtmlProvider: actualI18nextProvider
+        i18nextTrustedHtmlProvider: actualI18nextProvider,
+        clientSideComponentProvider: actualClientSideComponentProvider
     };
     // console.log("start rendering page with props", props);
     const res = await component(props);

package/esm/index.js

@@ -1,10 +1,10 @@
-import { NdContentImage, NdTranslatableText, NdList, NdCode, NdCallToAction, NdContentBlock } from "./content/nd-content";
+import { NdContentImage, NdTranslatableText, NdList, NdLink, NdCode, NdCallToAction, NdContentBlock } from "./content/nd-content";
 import { NdSkinComponent, NdRow, NdPageSkin, NdSkinComponentProps, NdContentSelector, NdComponentDefinition, NdThemeHierarchy } from "./skin/nd-skin";
 import { RenderingPageProps, RenderingPriority } from "./core/rendering-page-props";
 import { RenderingPage } from "./core/rendering-page";
 import { mergeTheme } from "./theme-utils/theme-merger";
 import { defaultRowThemeImpl } from "./theme-utils/row-style";
-export { NdContentImage, NdTranslatableText, NdList, NdCode, NdCallToAction, NdContentBlock, NdSkinComponent, NdRow, NdPageSkin, NdSkinComponentProps, NdContentSelector, NdComponentDefinition, NdThemeHierarchy };
+export { NdContentImage, NdTranslatableText, NdList, NdLink, NdCode, NdCallToAction, NdContentBlock, NdSkinComponent, NdRow, NdPageSkin, NdSkinComponentProps, NdContentSelector, NdComponentDefinition, NdThemeHierarchy };
 export { RenderingPageProps, RenderingPriority, RenderingPage };
 export { mergeTheme };
 export { DummyComp } from "./core/dummy-comp";
@@ -23,14 +23,14 @@ export const tsi = function (t, key, i) {
         const obj = t[key];
         const themeStyle = obj[i % len];
         const k = key;
-        return k + `[${i}]` + themeStyle?.base + " " + themeStyle?.decoration;
+        return k + `[${i}] ` + themeStyle?.base + " " + themeStyle?.decoration;
     }
     else if (Array.isArray(t[key])) {
         // console.log("this is tsi array", key)
         const len = t[key].length;
         const themeStyle = t[key][i % len];
         const k = key;
-        return k + `[${i}]` + themeStyle?.base + " " + themeStyle?.decoration;
+        return k + `[${i}] ` + themeStyle?.base + " " + themeStyle?.decoration;
     }
     else {
         return ts(t, key);

package/esm/providers/content/content-markdown-provider.js

@@ -1,8 +1,9 @@
 import { NdTranslatableText, NdList, NdContentBlock, NdContentImage, NdCode } from "nodoku-core";
 import { Marked } from '@ts-stack/markdown';
-import { parse } from 'node-html-parser';
+import { parse, TextNode } from 'node-html-parser';
 import yaml from "js-yaml";
 import { NdCallToAction } from "../../content/nd-content";
+import { NdLink } from "../../content/nd-content";
 const nsRegex = /.*\/(.*)\.md/;
 export async function contentMarkdownProvider(mdFileUrl, contentLng, ns = undefined) {
     return await fetch(mdFileUrl)
@@ -203,7 +204,7 @@ class BlockHolder {
                 text = newBlock.h6;
             }
             else if (this.blockContent.paragraphsIndex.indexOf(i) >= 0) {
-                const para = this.parseParagraph(blockId, htmlElem, pi);
+                const para = this.parseParagraph(`${blockId}.paragraphs.${pi}`, htmlElem);
                 if (para) {
                     newBlock.paragraphs.push(para);
                     text = para;
@@ -285,9 +286,23 @@ class BlockHolder {
         // console.log("returnin created cta: ", cta)
         return cta;
     }
-    parseParagraph(blockId, p, pi) {
+    parseParagraph(idPrefix, cn) {
+        if (!cn) {
+            return undefined;
+        }
+        if (cn instanceof TextNode) {
+            return new NdTranslatableText(this.ns, `${idPrefix}`, cn.text);
+        }
+        const p = cn;
+        if (!p.rawTagName) {
+            return undefined;
+        }
+        // console.log("parsing paragraph", p.innerHTML);
         if (p.rawTagName === "p" || p.rawTagName === "blockquote") {
-            return new NdTranslatableText(this.ns, `${blockId}.paragraphs.${pi}`, p.innerHTML);
+            return new NdTranslatableText(this.ns, `${idPrefix}`, p.innerHTML);
+        }
+        else if (p.rawTagName === "a") {
+            return new NdLink(new NdTranslatableText(this.ns, `${idPrefix}.urlText`, p.innerHTML), new NdTranslatableText(this.ns, `${idPrefix}.url`, p.attributes["href"], true));
         }
         else if (p.rawTagName === "pre") {
             const codeHtml = p.childNodes[0];
@@ -301,24 +316,50 @@ class BlockHolder {
             }
         }
         else if (p.rawTagName === "ol") {
-            return NdList.createOrdered(p.childNodes
-                .filter(lin => lin.innerText && lin.innerText.trim().length > 0)
-                .map((lin, k) => {
-                const li = lin;
-                return new NdTranslatableText(this.ns, `${blockId}.paragraphs.${pi}.items.${k}`, li.innerHTML);
-            }));
+            return NdList.createOrdered(this.parseListItems(idPrefix, p));
         }
         else if (p.rawTagName === "ul") {
-            return NdList.createUnOrdered(p.childNodes
-                .filter(lin => lin.innerText && lin.innerText.trim().length > 0)
-                .map((lin, k) => {
-                const li = lin;
-                return new NdTranslatableText(this.ns, `${blockId}.paragraphs.${pi}.items.${k}`, li.innerHTML);
-            }));
-        }
-        console.log("couldn't parse paragraph: ", p);
+            return NdList.createUnOrdered(this.parseListItems(idPrefix, p));
+        } /*else {
+            return new NdTranslatableText(this.ns, `${idPrefix}`, p.innerHTML);
+        }*/
+        console.log("couldn't parse paragraph: ", p.innerHTML);
         return undefined;
     }
+    parseListItems(idPrefix, p) {
+        return p.childNodes
+            .filter(lin => lin.innerText && lin.innerText.trim().length > 0)
+            .map((lin, k) => {
+            const li = lin;
+            let innerList = undefined;
+            let liText; //TextNode | undefined;
+            if (li.childNodes.length > 0) {
+                // console.log("found inner item", li.childNodes.length, (li.childNodes.map(i => i as HTMLElement)
+                //     .map((i1: HTMLElement) => i1.rawTagName ? i1.rawTagName : "N.A")), "<<<");
+                //
+                // console.log("found inner list", li.childNodes[0].innerText)
+                innerList = li.childNodes
+                    .map(cn => this.parseParagraph(`${idPrefix}.items.${k}.subList`, cn))
+                    .find((p) => p != undefined && p instanceof NdList);
+                liText = li.childNodes
+                    .map(cn => this.parseParagraph(`${idPrefix}.items.${k}.text`, cn))
+                    .find((p) => p != undefined && (p instanceof NdLink || p instanceof NdTranslatableText));
+                // innerList = innerNodes.find((p: NdParagraph | undefined) => p != undefined && p instanceof NdList)
+                // if (li.childNodes[0].rawTagName in ["ol", "ul"]) {
+                // }
+                // liText = li.childNodes.filter(cn => cn instanceof TextNode).find(t => t && t.text.length > 0);
+                // liText = innerNodes.find((p: NdParagraph | undefined) => p != undefined && (p instanceof NdLink || p instanceof NdTranslatableText))
+            }
+            // type l = keyof HTMLElement
+            // console.log("found list", li.childNodes.filter(cn => Object.keys(cn).map(k => k == "parentNode" ? "parent" : (cn as HTMLElement)[k as l])), "<<", lin.innerText, "<<")
+            // const foundList = {text: new NdTranslatableText(this.ns, `${idPrefix}.items.${k}`, liText)/*liText*/, subList: innerList};
+            const foundList = { text: liText ? liText : new NdTranslatableText(this.ns, `${idPrefix}.items.${k}`, "n/a"), subList: innerList };
+            // console.log("found list", ">>", foundList, "<<")
+            return foundList;
+            // const listItem = this.parseParagraph(`${idPrefix}.items.${k}`, li)
+            // return listItem ? listItem : new NdTranslatableText(this.ns, `${idPrefix}.items.${k}`, "undefined list item" + li.innerHTML);
+        }).filter(lin => lin != undefined);
+    }
 }
 export function parseMarkdownAsContent(fileContents, contentLng, ns) {
     Marked.setOptions({ isNoP: true });

package/esm/providers/skin/skin-yaml-provider.js

@@ -40,6 +40,7 @@ export function parseYamlContentAsSkin(fileContents) {
                 lbVisualComponent.themeHierarchy.componentThemes = componentTheme ? componentTheme[vcName]?.themes?.slice() : undefined;
                 lbVisualComponent.themeHierarchy.theme = vb.theme;
                 lbVisualComponent.themeHierarchy.themes = vb.themes?.slice();
+                lbVisualComponent.themeHierarchy.options = vb.options;
                 lbVisualComponent.componentName = vcName;
                 const attributes = vb.selector.attributes ?
                     Object.keys(vb.selector.attributes).map(a => { return { key: a, value: vb.selector.attributes[a] }; }) :

package/esm/skin/nd-skin.js

@@ -119,7 +119,8 @@ export class NdSkinComponentProps {
     lng;
     imageProvider;
     i18nextTrustedHtmlProvider;
-    constructor(rowIndex, componentIndex, content, defaultThemeName, theme, themes, options, lng, imageProvider, i18nextTrustedHtmlProvider) {
+    clientSideComponentProvider;
+    constructor(rowIndex, componentIndex, content, defaultThemeName, theme, themes, options, lng, imageProvider, i18nextTrustedHtmlProvider, clientSideComponentProvider) {
         this.rowIndex = rowIndex;
         this.componentIndex = componentIndex;
         this.content = content;
@@ -130,5 +131,6 @@ export class NdSkinComponentProps {
         this.lng = lng;
         this.imageProvider = imageProvider;
         this.i18nextTrustedHtmlProvider = i18nextTrustedHtmlProvider;
+        this.clientSideComponentProvider = clientSideComponentProvider;
     }
 }

package/esm/tailwind/index.js

@@ -0,0 +1,10 @@
+export var NodokuCoreTailwind;
+(function (NodokuCoreTailwind) {
+    function tailwindConfig(nodeModules = "./node_modules") {
+        return [
+            `./${nodeModules}/nodoku-core/esm/**/*.js`,
+            `./${nodeModules}/nodoku-core/esm/**/*.jsx`,
+        ];
+    }
+    NodokuCoreTailwind.tailwindConfig = tailwindConfig;
+})(NodokuCoreTailwind || (NodokuCoreTailwind = {}));

package/package.json

@@ -1,12 +1,16 @@
 {
   "name": "nodoku-core",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "description": "basic foundation for nodoku static site generator",
   "exports": {
     ".": {
       "types": "./types/index.d.ts",
       "import": "./esm/index.js"
     },
+    "./tailwind": {
+      "types": "./types/tailwind/index.d.ts",
+      "require": "./esm/tailwind/index.js"
+    },
     "./package.json": "./package.json"
   },
   "module": "esm/index.js",

package/schemas/manifest-schema.json

@@ -34,6 +34,12 @@
                 "type": "number"
               }
             ]
+          },
+          "clientSideComps": {
+            "type": "array",
+            "items": {
+              "type": "string"
+            }
           }
         },
         "required": [

package/tailwind/cjs/index.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NodokuCoreTailwind = void 0;
+var NodokuCoreTailwind;
+(function (NodokuCoreTailwind) {
+    function tailwindConfig(nodeModules) {
+        if (nodeModules === void 0) { nodeModules = "./node_modules"; }
+        return [
+            "./".concat(nodeModules, "/nodoku-core/esm/**/*.js"),
+            "./".concat(nodeModules, "/nodoku-core/esm/**/*.jsx"),
+        ];
+    }
+    NodokuCoreTailwind.tailwindConfig = tailwindConfig;
+})(NodokuCoreTailwind || (exports.NodokuCoreTailwind = NodokuCoreTailwind = {}));
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvdGFpbHdpbmQvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7O0FBQUEsSUFBaUIsa0JBQWtCLENBUWxDO0FBUkQsV0FBaUIsa0JBQWtCO0lBQy9CLFNBQWdCLGNBQWMsQ0FBQyxXQUFzQztRQUF0Qyw0QkFBQSxFQUFBLDhCQUFzQztRQUNqRSxPQUFPO1lBQ0gsWUFBSyxXQUFXLDZCQUEwQjtZQUMxQyxZQUFLLFdBQVcsOEJBQTJCO1NBQzlDLENBQUE7SUFDTCxDQUFDO0lBTGUsaUNBQWMsaUJBSzdCLENBQUE7QUFFTCxDQUFDLEVBUmdCLGtCQUFrQixrQ0FBbEIsa0JBQWtCLFFBUWxDIn0=

package/tailwind/types/index.d.ts

@@ -0,0 +1,3 @@
+export declare namespace NodokuCoreTailwind {
+    function tailwindConfig(nodeModules?: string): string[];
+}

package/types/bin/manifest.d.ts

@@ -4,6 +4,7 @@ export type ComponentDef = {
     optionsSchema: string;
     defaultThemeFile: string;
     numBlocks: string | number;
+    clientSideComps: string[];
 };
 export type Manifest = {
     moduleName: string;

package/types/content/nd-content.d.ts

@@ -15,18 +15,28 @@ export declare class NdTranslatableText {
     excludeFromTranslation: boolean;
     constructor(ns: string, key?: string, text?: string, excludeFromTranslation?: boolean);
 }
+export type NdListItem = {
+    text: NdTranslatableText | NdLink;
+    subList: NdParagraph | undefined;
+};
 export declare class NdList {
-    items: NdTranslatableText[];
+    items: NdListItem[];
     ordered: boolean;
     private constructor();
-    static createOrdered(items: NdTranslatableText[]): NdList;
-    static createUnOrdered(items: NdTranslatableText[]): NdList;
+    static createOrdered(items: NdListItem[]): NdList;
+    static createUnOrdered(items: NdListItem[]): NdList;
 }
 export declare class NdCode {
     lang: string;
     code: string;
     constructor(lang: string, code: string);
 }
+export declare class NdLink {
+    urlText: NdTranslatableText | undefined;
+    url: NdTranslatableText;
+    constructor(text: NdTranslatableText, url: NdTranslatableText);
+}
+export type NdParagraph = NdTranslatableText | NdList | NdCode | NdLink;
 export declare class NdContentBlock {
     id: string;
     lng: string;
@@ -43,7 +53,7 @@ export declare class NdContentBlock {
     h5?: NdTranslatableText;
     h6?: NdTranslatableText;
     callToActions: NdCallToAction[];
-    paragraphs: (NdTranslatableText | NdList | NdCode)[];
+    paragraphs: NdParagraph[];
     images: NdContentImage[];
     htmlElements: {
         htmlElem: HTMLElement;

package/types/core/providers.d.ts

@@ -25,3 +25,4 @@ export type NdI18nextTrustedHtmlProvider = (lng: string) => Promise<{
 export type NdImageProvider = (imageProps: NdImageProps) => Promise<JSX.Element>;
 export type NdI18NextPostProcessor = (text: string) => string;
 export type NdHtmlSanitizer = (text: string) => NdTrustedHtml;
+export type NdClientSideComponentProvider = (componentName: string) => JSX.Element;

package/types/core/rendering-page-props.d.ts

@@ -3,6 +3,7 @@ import { NdContentBlock } from "../content/nd-content";
 import { NdPageSkin } from "../skin/nd-skin";
 import { NdI18NextPostProcessor } from "./providers";
 import { NdHtmlSanitizer } from "./providers";
+import { NdClientSideComponentProvider } from "./providers";
 export declare enum RenderingPriority {
     content_first = 0,
     skin_first = 1
@@ -17,5 +18,6 @@ export declare class RenderingPageProps {
     i18nextProvider: NdI18nextProvider | undefined;
     i18nextPostProcessor: NdI18NextPostProcessor | undefined;
     htmlSanitizer: NdHtmlSanitizer | undefined;
-    constructor(lng: string, content: NdContentBlock[], componentResolver: ComponentResolver | undefined, skin?: NdPageSkin | undefined, renderingPriority?: RenderingPriority, imageProvider?: NdImageProvider | undefined, i18nextProvider?: NdI18nextProvider | undefined, htmlSanitizer?: NdHtmlSanitizer | undefined);
+    clientSideComponentProvider: NdClientSideComponentProvider | undefined;
+    constructor(lng: string, content: NdContentBlock[], componentResolver: ComponentResolver | undefined, skin?: NdPageSkin | undefined, renderingPriority?: RenderingPriority, imageProvider?: NdImageProvider | undefined, i18nextProvider?: NdI18nextProvider | undefined, htmlSanitizer?: NdHtmlSanitizer | undefined, clientSideComponentProvider?: NdClientSideComponentProvider | undefined);
 }

package/types/index.d.ts

@@ -1,4 +1,4 @@
-import { NdContentImage, NdTranslatableText, NdList, NdCode, NdCallToAction, NdContentBlock } from "./content/nd-content";
+import { NdContentImage, NdTranslatableText, NdList, NdLink, NdListItem, NdCode, NdCallToAction, NdParagraph, NdContentBlock } from "./content/nd-content";
 import { NdSkinComponent, NdRow, NdPageSkin, NdSkinComponentProps, NdContentSelector, NdComponentDefinition, NdThemeHierarchy, NdDefaultThemeName } from "./skin/nd-skin";
 import { RenderingPageProps, RenderingPriority } from "./core/rendering-page-props";
 import { RenderingPage } from "./core/rendering-page";
@@ -8,7 +8,7 @@ import { ThemeStyle } from "./theme-utils/theme-style";
 import { ExtendedThemeStyle } from "./theme-utils/extended-theme-style";
 import { ImageStyle } from "./theme-utils/image-style";
 import { RowStyle } from "./theme-utils/row-style";
-export { NdContentImage, NdTranslatableText, NdList, NdCode, NdCallToAction, NdContentBlock, NdSkinComponent, NdRow, NdPageSkin, NdSkinComponentProps, NdContentSelector, NdComponentDefinition, NdThemeHierarchy, type NdDefaultThemeName, type NdImageProps, type NdI18nextTrustedHtmlProvider, type NdHtmlSanitizer, type NdTrustedHtml, type NdI18NextPostProcessor };
+export { NdContentImage, NdTranslatableText, NdList, type NdListItem, NdLink, NdCode, NdCallToAction, NdContentBlock, NdSkinComponent, NdRow, NdPageSkin, NdSkinComponentProps, NdContentSelector, NdComponentDefinition, NdThemeHierarchy, type NdParagraph, type NdDefaultThemeName, type NdImageProps, type NdI18nextTrustedHtmlProvider, type NdHtmlSanitizer, type NdTrustedHtml, type NdI18NextPostProcessor };
 export { RenderingPageProps, RenderingPriority, RenderingPage };
 export { mergeTheme, type ThemeStyle, type ExtendedThemeStyle, type ImageStyle };
 export type { NdI18nextProvider, AsyncFunctionComponent, NdImageProvider };

package/types/skin/nd-skin.d.ts

@@ -3,6 +3,7 @@ import { NdContentBlock } from "../content/nd-content";
 import { ThemeStyle } from "../theme-utils/theme-style";
 import { RowStyle } from "../theme-utils/row-style";
 import { NdI18nextTrustedHtmlProvider } from "../core/providers";
+import { NdClientSideComponentProvider } from "../core/providers";
 export type NdDefaultThemeName = "light" | "dark";
 export declare class NdThemeHierarchy {
     defaultThemeName: NdDefaultThemeName;
@@ -72,5 +73,6 @@ export declare class NdSkinComponentProps<TComponentTheme = any, TComponentOptio
     lng: string;
     imageProvider: NdImageProvider;
     i18nextTrustedHtmlProvider: NdI18nextTrustedHtmlProvider;
-    constructor(rowIndex: number, componentIndex: number, content: NdContentBlock[], defaultThemeName: NdDefaultThemeName, theme: TComponentTheme, themes: TComponentTheme[], options: TComponentOptions, lng: string, imageProvider: NdImageProvider, i18nextTrustedHtmlProvider: NdI18nextTrustedHtmlProvider);
+    clientSideComponentProvider: NdClientSideComponentProvider;
+    constructor(rowIndex: number, componentIndex: number, content: NdContentBlock[], defaultThemeName: NdDefaultThemeName, theme: TComponentTheme, themes: TComponentTheme[], options: TComponentOptions, lng: string, imageProvider: NdImageProvider, i18nextTrustedHtmlProvider: NdI18nextTrustedHtmlProvider, clientSideComponentProvider: NdClientSideComponentProvider);
 }

package/types/tailwind/index.d.ts

@@ -0,0 +1,3 @@
+export declare namespace NodokuCoreTailwind {
+    function tailwindConfig(nodeModules?: string): string[];
+}