TypeStrong · cspotcode · Jul 15, 2021 · Jul 15, 2021 · Jul 15, 2021 · Jul 15, 2021
diff --git a/.gitmodules b/.gitmodules
@@ -0,0 +1,3 @@
+[submodule "typedoc"]
+	path = typedoc
+	url = https://github.com/TypeStrong/typedoc
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -1 +1,3 @@
-{}
+{
+    "printWidth": 120
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,10 @@
+{
+    "[typescript]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode",
+        "editor.formatOnSave": true
+    },
+    "[typescriptreact]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode",
+        "editor.formatOnSave": true
+    },
+}
diff --git a/convert.ts b/convert.ts
@@ -0,0 +1,21 @@
+import {readFileSync, writeFileSync} from 'fs';
+import { compile } from 'handlebars-to-jsx';
+import {sync as globSync} from 'glob';
+import {outdent} from 'outdent';
+
+for(const file of globSync('src/**/*.hbs')) {
+    console.dir(file);
+    try {
+        const converted = compile(readFileSync(file, 'utf8'));
+        writeFileSync(file.replace(/.hbs$/, '.tsx'), outdent `
+            import React from 'react';
+            export const component = ${ converted }
+
+        `);
+    } catch(e) {
+        // if(e.message.includes('block may only')) {
+            console.log(e.message);
+            console.log(`${file}:${e.location?.start?.line}:${e.location?.start?.column}`);
+        // }
+    }
+}
diff --git a/package.json b/package.json
@@ -47,5 +47,15 @@
     "typescript",
     "documentation",
     "generator"
-  ]
+  ],
+  "dependencies": {
+    "@types/react": "^17.0.14",
+    "@types/react-dom": "^17.0.9",
+    "glob": "^7.1.7",
+    "handlebars-to-jsx": "^0.1.4",
+    "outdent": "^0.8.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "ts-node": "^10.1.0"
+  }
 }
diff --git a/src/default/layouts/default.hbs b/src/default/layouts/default.hbs
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <title>{{#ifCond model.name '==' project.name}}{{project.name}}{{else}}{{model.name}} | {{project.name}}{{/ifCond}}</title>
+    <title><IfCond cond="model.name '==' project.name">{{project.name}}</IfCond><IfNotCond cond="model.name '==' project.name">{{model.name}} | {{project.name}}</IfNotCond></title>
     <meta name="description" content="Documentation for {{project.name}}">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
@@ -12,7 +12,7 @@
 </head>
 <body>
 
-{{> header}}
+{{__partials__.header}}
 
 <div class="container container-main">
     <div class="row">
@@ -23,28 +23,28 @@
             <nav class="tsd-navigation primary">
                 <ul>
                     {{#each navigation.children}}
-                        {{> navigation}}
+                        {{__partials__.navigation}}
                     {{/each}}
                 </ul>
             </nav>
 
             <nav class="tsd-navigation secondary menu-sticky">
                 <ul class="before-current">
                     {{#each toc.children}}
-                        {{> toc.root}}
+                        {{__partials__.toc.root}}
                     {{/each}}
                 </ul>
             </nav>
         </div>
     </div>
 </div>
 
-{{> footer}}
+{{__partials__.footer}}
 
 <div class="overlay"></div>
 <script src="{{relativeURL "assets/js/main.js"}}"></script>
 
-{{> analytics}}
+{{__partials__.analytics}}
 
 </body>
 </html>
diff --git a/src/default/layouts/default.tsx b/src/default/layouts/default.tsx
@@ -0,0 +1,56 @@
+import { With, relativeURL, wbr, __partials__, IfCond, IfNotCond, Markdown } from "../../lib";
+import React from "react";
+export const defaultLayout = (props) => (
+    <>
+        <html className="default no-js">
+            <head>
+                <meta charSet="utf-8" />
+                <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
+                <title>
+                    <IfCond cond={props.model.name === props.project.name}>{props.project.name}</IfCond>
+                    <IfNotCond cond={props.model.name === props.project.name}>
+                        {props.model.name} | {props.project.name}
+                    </IfNotCond>
+                </title>
+                <meta name="description" content={"Documentation for " + props.project.name} />
+                <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+                <link rel="stylesheet" href={relativeURL(TODO)} />
+                <script async={true} src={relativeURL(TODO)} id="search-script"></script>
+            </head>
+            <body>
+                {__partials__.header(props)}
+
+                <div className="container container-main">
+                    <div className="row">
+                        <div className="col-8 col-content">{props.contents}</div>
+                        <div className="col-4 col-menu menu-sticky-wrap menu-highlight">
+                            <nav className="tsd-navigation primary">
+                                <ul>
+                                    {props.navigation.children.map((item, i) => (
+                                        <> {__partials__.navigation(item)}</>
+                                    ))}{" "}
+                                </ul>
+                            </nav>
+
+                            <nav className="tsd-navigation secondary menu-sticky">
+                                <ul className="before-current">
+                                    {props.toc.children.map((item, i) => (
+                                        <> {__partials__.tocRoot(item)}</>
+                                    ))}{" "}
+                                </ul>
+                            </nav>
+                        </div>
+                    </div>
+                </div>
+
+                {__partials__.footer(props)}
+
+                <div className="overlay"></div>
+                <script src={relativeURL(TODO)}></script>
+
+                {__partials__.analytics(props)}
+            </body>
+        </html>
+    </>
+);
diff --git a/src/default/partials/analytics.tsx b/src/default/partials/analytics.tsx
@@ -0,0 +1,15 @@
+import { With, relativeURL, wbr, __partials__ } from "../../lib";
+import React from "react";
+export const analytics = (props) =>
+    !!props.settings.gaID && (
+        <>
+            {" "}
+            <script>
+                (function(i,s,o,g,r,a,m){"{"}i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){"{"}
+                (i[r].q=i[r].q||[]).push(arguments){"}"},i[r].l=1*new Date();a=s.createElement(o),
+                m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+                {"}"})(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', '
+                {props.settings.gaID}', '{props.settings.gaSite}'); ga('send', 'pageview');
+            </script>
+        </>
+    );
diff --git a/src/default/partials/breadcrumb.hbs b/src/default/partials/breadcrumb.hbs
@@ -1,5 +1,5 @@
 {{#if parent}}
-    {{#with parent}}{{> breadcrumb}}{{/with}}
+    <With superProps=props props=parent>{{__partials__.breadcrumb}}</With>
     <li>
         {{#if url}}
             <a href="{{relativeURL url}}">{{name}}</a>

diff --git a/src/default/partials/breadcrumb.tsx b/src/default/partials/breadcrumb.tsx
@@ -0,0 +1,33 @@
+import { With, relativeURL, wbr, __partials__, Compact, IfCond, IfNotCond, Markdown } from "../../lib";
+import React from "react";
+export const breadcrumb = (props) =>
+    props.parent ? (
+        <>
+            {" "}
+            {With(props, props.parent, (superProps, props) => (
+                <>{__partials__.breadcrumb(props)}</>
+            ))}
+            <li>
+                {!!props.url ? (
+                    <>
+                        {" "}
+                        <a href={relativeURL(TODO)}>{props.name}</a>
+                    </>
+                ) : (
+                    <>
+                        {" "}
+                        <span>{props.name}</span>
+                    </>
+                )}{" "}
+            </li>
+        </>
+    ) : (
+        !!props.url && (
+            <>
+                {" "}
+                <li>
+                    <a href={relativeURL(TODO)}>{props.name}</a>
+                </li>
+            </>
+        )
+    );
diff --git a/src/default/partials/comment.hbs b/src/default/partials/comment.hbs
@@ -1,22 +1,22 @@
-{{#with comment}}
+<With superProps=props props=comment>
     {{#if hasVisibleComponent}}
         <div class="tsd-comment tsd-typography">
             {{#if shortText}}
                 <div class="lead">
-                    {{#markdown}}{{{shortText}}}{{/markdown}}
+                    <Markdown>{{{shortText}}}</Markdown>
                 </div>
             {{/if}}
             {{#if text}}
-                {{#markdown}}{{{text}}}{{/markdown}}
+                <Markdown>{{{text}}}</Markdown>
             {{/if}}
             {{#if tags}}
                 <dl class="tsd-comment-tags">
                     {{#each tags}}
                         <dt>{{tagName}}</dt>
-                        <dd>{{#markdown}}{{{text}}}{{/markdown}}</dd>
+                        <dd><Markdown>{{{text}}}</Markdown></dd>
                     {{/each}}
                 </dl>
             {{/if}}
         </div>
     {{/if}}
-{{/with}}
+</With>
diff --git a/src/default/partials/comment.tsx b/src/default/partials/comment.tsx
@@ -0,0 +1,47 @@
+import { With, relativeURL, wbr, __partials__, Compact, IfCond, IfNotCond, Markdown } from "../../lib";
+import React from "react";
+export const comment = (props) => (
+    <>
+        {With(props, props.comment, (superProps, props) => (
+            <>
+                {!!props.hasVisibleComponent && (
+                    <>
+                        {" "}
+                        <div className="tsd-comment tsd-typography">
+                            {!!props.shortText && (
+                                <>
+                                    {" "}
+                                    <div className="lead">
+                                        <Markdown>{props.shortText}</Markdown>
+                                    </div>
+                                </>
+                            )}
+                            {!!props.text && (
+                                <>
+                                    {" "}
+                                    <Markdown>{props.text}</Markdown>
+                                </>
+                            )}
+                            {!!props.tags && (
+                                <>
+                                    {" "}
+                                    <dl className="tsd-comment-tags">
+                                        {props.tags.map((item, i) => (
+                                            <>
+                                                {" "}
+                                                <dt>{item.tagName}</dt>
+                                                <dd>
+                                                    <Markdown>{item.text}</Markdown>
+                                                </dd>
+                                            </>
+                                        ))}{" "}
+                                    </dl>
+                                </>
+                            )}{" "}
+                        </div>
+                    </>
+                )}
+            </>
+        ))}
+    </>
+);
diff --git a/src/default/partials/footer.hbs b/src/default/partials/footer.hbs
@@ -1,12 +1,12 @@
 
-<footer{{#unless settings.hideGenerator}} class="with-border-bottom"{{/unless}}>
+<footer conditional="#unless settings.hideGenerator class=with-border-bottom /unless">
     <div class="container">
         <h2>Legend</h2>
         <div class="tsd-legend-group">
             {{#each legend}}
                 <ul class="tsd-legend">
-                    {{#each .}}
-                        <li class="{{#compact}}{{#each classes}} {{.}}{{/each}}{{/compact}}"><span class="tsd-kind-icon">{{name}}</span></li>
+                    {{#each props}}
+                        <li class="<Compact>#each classes . /each</Compact>"><span class="tsd-kind-icon">{{name}}</span></li>
                     {{/each}}
                 </ul>
             {{/each}}
@@ -18,4 +18,4 @@
     <div class="container tsd-generator">
         <p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
     </div>
-{{/unless}}
+{{/unless}}
diff --git a/src/default/partials/footer.tsx b/src/default/partials/footer.tsx
@@ -0,0 +1,42 @@
+import { With, relativeURL, wbr, __partials__, Compact, IfCond, IfNotCond, Markdown } from "../../lib";
+import React from "react";
+export const footer = (props) => (
+    <>
+        <footer conditional="#unless settings.hideGenerator class=with-border-bottom /unless">
+            <div className="container">
+                <h2>Legend</h2>
+                <div className="tsd-legend-group">
+                    {props.legend.map((item, i) => (
+                        <>
+                            {" "}
+                            <ul className="tsd-legend">
+                                {item.props.map((item, i) => (
+                                    <>
+                                        {" "}
+                                        <li className="<Compact>#each classes . /each</Compact>">
+                                            <span className="tsd-kind-icon">{item.name}</span>
+                                        </li>
+                                    </>
+                                ))}{" "}
+                            </ul>
+                        </>
+                    ))}{" "}
+                </div>
+            </div>
+        </footer>
+
+        {!props.settings.hideGenerator && (
+            <>
+                {" "}
+                <div className="container tsd-generator">
+                    <p>
+                        Generated using{" "}
+                        <a href="https://typedoc.org/" target="_blank">
+                            TypeDoc
+                        </a>
+                    </p>
+                </div>
+            </>
+        )}
+    </>
+);
diff --git a/src/default/partials/header.hbs b/src/default/partials/header.hbs
@@ -48,13 +48,13 @@
         <div class="container">
             {{#if model.parent}} {{! Don't show breadcrumbs on main project page, it is the root page. !}}
                 <ul class="tsd-breadcrumb">
-                    {{#with model}}{{> breadcrumb}}{{/with}}
+                    <With superProps=props props=model>{{__partials__.breadcrumb}}</With>
                 </ul>
             {{/if}}
-            <h1>{{#compact}}
-                {{#ifCond model.kindString "!==" "Project" }}
+            <h1><Compact>
+                <IfCond cond="model.kindString '!==' 'Project' ">
                     {{model.kindString}}&nbsp;
-                {{/ifCond}}
+                </IfCond>
                 {{model.name}}
                 {{#if model.typeParameters}}
                     &lt;
@@ -64,7 +64,7 @@
                     {{/each}}
                     &gt;
                 {{/if}}
-            {{/compact}}</h1>
+            </Compact></h1>
         </div>
     </div>
 </header>