string.replace and dollar sign breaking rendering

packages/temple-esbuild/package.json

@@ -19,9 +19,6 @@
   "scripts": {
     "build": "tsc"
   },
-  "peerDependencies": {
-    "esbuild": "^0.20"
-  },
   "dependencies": {
     "@ossph/temple": "0.0.15"
   },

packages/temple-express/src/index.ts

@@ -3,7 +3,7 @@ import temple from '@ossph/temple/compiler';
 
 export default function engine(
   options: TempleOptions, 
-  next: (res: string) => string = (res) => res,
+  next: (res: string) => string = (res) => res
 ) {
   const compiler = temple(options);
   return async (
@@ -12,7 +12,11 @@ export default function engine(
     callback: (err: Error | null, results: string | undefined) => void,
   ) => {
     const { settings, _locals, cache, ...props } = options;
-    const build = await compiler.import(filePath);
-    callback(null, next(build.document.render(props)));
+    try {
+      const build = await compiler.import(filePath);
+      callback(null, next(build.document.inline(props)));
+    } catch (e) {
+      callback(e as Error, undefined);
+    }
   };
 }

packages/temple-web/public/styles/theme.css

@@ -325,6 +325,97 @@ a, a:link a:hover, a:active, a:visited {
   }
 }
 
+/* Table
+---------------------------------*/
+.tbl-container {
+  position: relative;
+}
+.tbl {
+  border-collapse: collapse;
+  display: table;
+  width: 100%;
+}
+
+.tbl-scroll {
+  overflow: auto;
+  flex-grow: 1;
+  height: 100%;
+  width: 100%;
+}
+
+.tbl-nowrap {
+  white-space: nowrap;
+}
+
+.tbl-z0 {
+  z-index: 0;
+}
+.tbl-z1 {
+  z-index: 1;
+}
+.tbl-z2 {
+  z-index: 2;
+}
+.tbl-z3 {
+  z-index: 3;
+}
+.tbl-z4 {
+  z-index: 4;
+}
+
+.tbl-sticky {
+  position: sticky;
+}
+.tbl-sticky-b {
+  bottom: 0;
+}
+.tbl-sticky-l {
+  left: 0;
+}
+.tbl-sticky-t {
+  top: 0;
+}
+.tbl-sticky-r {
+  right: 0;
+}
+
+.tbl-col {
+  border-color: black;
+  border-style: solid;
+  border-top-width: 1px;
+  padding-bottom: 16px;
+  padding-left: 12px;
+  padding-right: 12px;
+  padding-top: 16px;
+}
+
+.tbl-foot {
+  border-color: black;
+  border-style: solid;
+  border-top-width: 1px;
+  padding-bottom: 16px;
+  padding-left: 12px;
+  padding-right: 12px;
+  padding-top: 16px;
+}
+
+.tbl-row {
+  padding-bottom: 16px;
+  padding-left: 12px;
+  padding-right: 12px;
+  padding-top: 16px;
+}
+
+.tbl-head {
+  border-color: black;
+  border-style: solid;
+  border-top-width: 1px;
+  padding-bottom: 16px;
+  padding-left: 12px;
+  padding-right: 12px;
+  padding-top: 16px;
+}
+
 /* Head
 ---------------------------------*/
 .head {

packages/temple-web/src/components/code-preview.tml

@@ -12,7 +12,6 @@
   }
 </style>
 <script>
-  import { props } from '@ossph/temple';
-  const { children } = props();
+  import { children } from '@ossph/temple';
 </script>
-<div class="preview">{children}</div>
+<div class="preview">{children()}</div>

packages/temple-web/src/components/code-snippet.tml

@@ -3,7 +3,6 @@
   :host {
     display: block;
     font-size: 16px;
-    line-height: 26px;
   }
   .snippet {
     background-color: #101113;
@@ -67,19 +66,33 @@
   .snippet .hljs-type {
     color: #C3937B;
   }
+  .terminal {
+    background-color: #000000;
+    padding: 10px;
+  }
+  .terminal span {
+    color: #00FF00;
+  }
 </style>
 <script>
-  import { props } from '@ossph/temple';
-  const { lang = 'html', children } = props();
+  import { props, children } from '@ossph/temple';
+  const { lang = 'html' } = props();
   const language = `language-${lang}`;
 
+  const snippet = children()[0];
+
   const highlight = event => {
     const code = hljs.highlight(
-      children[0].textContent,
+      snippet.textContent,
       { language: lang }
     ).value;
     event.detail.target.innerHTML = code;
     hljs.lineNumbersBlock(event.detail.target);
   };
 </script>
-<pre class="snippet"><code class=language mount=highlight></code></pre>
+<if true={lang === 'bash'}>
+  <div class="terminal"><span>$</span> {children()}</div>
+<else />
+  <pre class="snippet"><code class=language mount=highlight></code></pre>
+</if>
+

packages/temple-web/src/components/panel-main.tml

@@ -1 +1 @@
-<main>{props.children}</main>
+<main>{children()}</main>

packages/temple-web/src/components/tui-button.tml

@@ -36,7 +36,7 @@
 </style>
 <script>
   //this is only called on server side
-  import { props } from '@ossph/temple';
+  import { props, children } from '@ossph/temple';
   // Separate component related props from field attributes
   const { 
     block,     full,    color,
@@ -48,8 +48,7 @@
     error,     muted,   primary, 
     secondary, outline, transparent, 
     solid,     style,   classname,   
-    children,  href,
-    ...attributes 
+    href,      ...attributes 
   } = props();
 
   const defaults = {
@@ -144,11 +143,11 @@
 </script>
 <if true={!!href}>
   <a class={map.classes} style={map.style} href={href} {...attributes}>
-    {children}
+    {children()}
   </a>
 </if>
 <if true={!href}>
   <button class={map.classes} style={map.style} {...attributes}>
-    {children}
+    {children()}
   </button>
 </if>

packages/temple-web/src/components/tweet-box.tml

@@ -38,8 +38,8 @@
   }
 </style>
 <script>
-  import { props } from '@ossph/temple';
-  const { name, handle, href, src, children } = props();
+  import { props, children } from '@ossph/temple';
+  const { name, handle, href, src } = props();
 </script>
 <main class="tweet-box">
   <aside class="avatar">
@@ -48,6 +48,6 @@
   <section class="content">
     <h3>{name}</h3>
     <a {href} target="_blank">{handle}</a>
-    <div class="message">{children}</div>
+    <div class="message">{children()}</div>
   </section>
 </main>

packages/temple-web/src/components/window-app.tml

@@ -69,8 +69,8 @@
   }
 </style>
 <script>
-  import { props } from '@ossph/temple';
-  const { title, children } = props();
+  import { props, children } from '@ossph/temple';
+  const { title } = props();
 </script>
 <div class="window">
   <div class="head">
@@ -79,5 +79,5 @@
     <span class="dot"></span>
     <span class="title">{title}</span>
   </div>
-  <div class="body">{children}</div>
+  <div class="body">{children()}</div>
 </div>

packages/temple-web/src/index.ts

@@ -1,9 +1,13 @@
+import type { Request, Response } from 'express';
+
 import fs from 'fs';
 import path from 'path';
 import express from 'express';
 import { dev, inject } from '@ossph/temple-dev';
 import engine from '@ossph/temple-express';
 
+type Next = () => void;
+
 //setup an HTTP server
 const app = express();
 //let's use express' template engine feature
@@ -21,10 +25,23 @@ app.use('/temple', express.static('public'));
 //attach the dev middleware
 app.use(dev({ cwd: __dirname }));
 
+//error handling
+app.use((err: Error, req: Request, res: Response, next: Next) => {
+  console.error(err);
+  res.status(500);
+  res.render('500', { error: err.message });
+  next();
+});
+
 app.get('/temple/**', (req, res) => {
   const props = { title: 'Temple Documentation' };
   // ex. app
-  const route = req.path.substring(8);
+  const route = (() => {
+    if (req.path.endsWith('.html')) {
+      return req.path.substring(8, req.path.length - 5);
+    }
+    return req.path.substring(8)
+  })();
   //if route is empty, go to index
   if (route.length === 0) {
     res.type('text/html');

packages/temple-web/src/pages/500.tml

@@ -0,0 +1,39 @@
+<link rel="import" type="template" href="@/templates/html-head.tml" />
+<link rel="import" type="template" href="@/templates/panel-head.tml" />
+<link rel="import" type="component" href="@/components/panel-main.tml" />
+<style>
+  p { padding: 20px; }
+</style>
+<script>
+  //This is ran on both the server and the browser
+  //There is no signal, children prop here because 
+  //this is not a component.
+  //
+  //We also need to becareful with importing browser 
+  //scripts here. You should do that in the <head>
+  //instead.
+  import { props } from '@ossph/temple';
+
+  const url = '/temple/500.html';
+  const title = 'Oops... - Temple - The reactive web component template engine.';
+  const description = 'Temple is a template engine hat generates web components and support reactivity.';
+
+  const { error } = props();
+
+  const toggle = _ => {
+    document.body.classList.toggle('panel-left-open');
+  };
+</script>
+<html>
+  <html-head />
+  <body class="dark panel with-head">
+    <panel-head />
+    <panel-main class="panel-main">
+      <div class="container">
+        <h1>Oops...</h1>
+        <p>Something went wrong. Please try again later.</p>
+        <pre>{error || ''}</pre>
+      </div>
+    </panel-main>
+  </body>
+</html>