updating READMEs

README.md

@@ -1,3 +1,17 @@
+<div align="center">
+  <img src="https://ossphilippines.github.io/temple/temple-icon.png" width="100" />
+  <h1>Temple</h1>
+  <a href="https://www.npmjs.com/package/@ossph/temple"><img src="https://img.shields.io/npm/v/%40ossph%2Ftemple.svg?style=flat" /></a>
+  <a href="https://github.com/OSSPhilippines/temple/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-Apache%202.0-blue.svg?style=flat" /></a>
+  <a href="https://github.com/OSSPhilippines/temple/commits/main/"><img src="https://img.shields.io/github/last-commit/OSSPhilippines/temple" /></a>
+  <a href="https://github.com/OSSPhilippines/temple/blob/main/README.md#contributing"><img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" /></a>
+  <br />
+  <br />
+  <a href="https://ossphilippines.github.io/">Documentation</a>
+  <br />
+  <hr />
+</div>
+
 # ⛩️ Temple
 
 The reactive web component template engine.
@@ -11,29 +25,16 @@ $ npm -i @ossph/temple
 ## Compiler Usage
 
 ```js
+//on server:
 import temple from '@ossph/temple/compiler';
-//make a template engine
-const compiler = temple({...options...});
-//load a Temple file
-const { document } = await compiler.import('./page.tml');
-//render final HTML
-const results = document.render({...props...});
+//make a temple compiler
+const compiler = temple();
+//render HTML
+const results = compiler.render('./page.dtml');
+//show HTML
+console.log(results);
 ```
 
-### Document Options
-
-| Name        | Description                            |
-|-------------|----------------------------------------|
-| fs          | File system where temple files located |
-| cwd         | The current working directory          |
-| brand       | The web component prefix               |
-| cache       | Turn on file caching                   |
-| minify      | Turn on minification                   |
-| bundle      | Turn on file bundling                  |
-| buildFolder | If cache, where to put cached files    |
-| tsconfig    | Location of your tsconfig.json file    |
-
-
 ## Temple Markup
 
 **Basic Markup**
@@ -71,8 +72,7 @@ const results = document.render({...props...});
 <!-- page.html -->
 <script>
   import { props } from '@ossph/temple';
-  type PageProps = { name: string };
-  const { name } = props<PageProps>();
+  const { name } = props();
 </script>
 <h1>Hello {name}</h1>
 ```
@@ -83,31 +83,31 @@ const results = document.render({...props...});
 <!-- page.html -->
 <script>
   import { signal } from '@ossph/temple';
-  const name = signal<string>('world');
-  name.value += '!';
+  const name = signal('world');
+  const add = () => name.value += '!';
 </script>
-<h1>Hello {name.value}</h1>
+<h1 click=add>Hello {name.value}</h1>
 ```
 
 **Markup with Imports**
 
 ```html
 <!-- page.html -->
-<link rel="import" href="./my-heading.html">
+<link rel="import" type="component" href="./my-heading.tml" />
 <script>
   const name = 'world';
 </script>
-<my-heading name={name}>Hello</my-heading>
+<my-heading {name}>Hello</my-heading>
 ```
 
 ```html
 <!-- my-heading.html -->
 <script>
-  import { props } from '@ossph/temple';
-  type PageProps = { name: string, children: string };
-  const { name, children } = props<PageProps>();
+  import { props, children } from '@ossph/temple';
+  const { name } = props();
+
 </script>
-<h1>{children} {name}</h1>
+<h1>{children()} {name}</h1>
 ```
 
 **Markup with Conditional**
@@ -141,33 +141,19 @@ const results = document.render({...props...});
 
 ```html
 <!-- page.html -->
-<link rel="import" href="./components/header.tml" />
-<link rel="import" href="./components/paragraph.tml" />
-<link rel="import" href="./components/todo.tml" />
+<link rel="import" type="template" href="./templates/html-head.tml" />
+<link rel="import" type="component" href="./components/to-do.tml" />
 <style>
   body { 
     background-color: #DA532C; 
     color: #EFEFEF; 
   }
-  img { width: 100px; height: 100px; }
-  .title { text-align: center; }
-  .logo { text-align: center; }
-  .description { text-align: center; }
-  .list { text-align: center; }
 </style>
 <html>
-  <head>
-    <title>Temple</title>
-    <link rel="favicon" href="/favicon.ico" />
-    <link rel="shortcut icon" type="image/png" href="/favicon.png" />
-  </head>
-  <body class="light">
-    <header class="title">{title}</header>
-    <div class="logo">
-      <img src="/temple-logo.png" alt="Logo" />
-    </div>
-    <paragraph classname="description">{description}</paragraph>
-    <todo list=list start=start />
+  <html-head />
+  <body>
+    <h1>{title}</h1>
+    <to-do list=list start=start />
   </body>
 </html>
 ```
@@ -179,15 +165,7 @@ Current frontend solutions for the most part, come in the form of a
 into the frontend framework and give little export out to support server 
 first solutions. Temple is a modern HTML markup language and a server 
 first template engine with a built-in parser/compiler that generates 
-web components and support reactivity. The focus of Temple are the 
-following.
-
-| Features         | De-Features   |
-|------------------|---------------|
-| Template Engine  | No Hydration  |
-| Web Components   | No Hooks      |
-| Server First     | No Memo       |
-| Reactive Signals | No Brandcuffs |
+web components and support reactivity. 
 
 Temple works with most server frameworks including:
 

packages/temple-dev/README.md

@@ -16,23 +16,29 @@ $ npm -i @ossph/temple-dev
 # Usage
 
 ```js
-import express from 'express';
+import http from 'http';
 import temple from '@ossph/temple/compiler';
-import { dev, inject } from '@ossph/temple-dev';
+import { dev } from '@ossph/temple-dev';
 
-//setup a template engine
+//create temple compiler
 const compiler = temple({ cwd: __dirname });
-//setup an HTTP server
-const app = express();
-//attach the dev middleware
-app.use(dev({ cwd: __dirname }));
-
-app.get('/', async (req, res) => {
-  const { document } = await compiler.import('./templates/page.tml');
-  //here we are going to inject the dev 
-  //script needed to listen to the server
-  res.send(inject(document.render()));
+//1. create dev tools
+const { router, refresh } = dev({ cwd: __dirname });
+
+//create http server
+const server = http.createServer(async (req, res) => {
+  //2. Add dev router
+  if (router(req, res)) return;
+  //if home page
+  if (req.url === '/') {
+    //3. sync builder with refresh server
+    refresh.sync(compiler.fromSource('./page.dtml'));
+    //compile the document
+    const html = await compiler.render('./page.dtml');
+    //... send response ...
+  }
+  //... other routes ...
 });
-
-app.listen(3000);
+//listen on port 3000
+server.listen(3000);
 ```

packages/temple-esbuild/README.md

@@ -15,17 +15,11 @@ $ npm -i @ossph/temple-esbuild
 ## Usage
 
 ```js
-import path from 'path';
 import esbuild from 'esbuild';
-import { Component } from '@ossph/temple/compiler';
-import { tmlPlugin } from 'temple-esbuild';
-
-const document = path.resolve(__dirname, './app.tml');
-const component = new Component(document, {...options...});
-const tsconfig = path.resolve(__dirname, './tsconfig.json');
+import { esComponentPlugin } from 'temple-esbuild';
 
 esbuild.build({
   entryPoints: [ './app.tml' ],
-  plugins: [ tmlPlugin(component, tsconfig) ]
+  plugins: [ esComponentPlugin() ]
 });
 ```

packages/temple-express/README.md

@@ -17,14 +17,18 @@ $ npm -i @ossph/temple-express
 ```js
 import path from 'path';
 import express from 'express';
-import engine from '@ossph/temple-express';
+import { view } from '@ossph/temple-express';
 
+//create temple compiler
+const compiler = temple({ cwd: __dirname, minify: false });
+//create express app
 const app = express();
+
 //let's use express' template engine feature
-app.engine('tml', engine({ cwd: __dirname }));
+app.engine('dtml', view(compiler));
 //set the view engine to temple
 app.set('views', path.join(__dirname, 'templates'));
-app.set('view engine', 'tml');
+app.set('view engine', 'dtml');
 //..other routes
 app.listen(3000, () => {
   console.log('Server is running on http://localhost:3000');