v0.11.5

v0.11.5

CHANGELOG.md

@@ -1,9 +1,21 @@
 # Changelog
 
-## v0.11.4
+## v0.11.5
 
 ### Added
 
-- Better documentation
-  - `~/src/Renderer.ts`
+- Added static css and js files to the test server app.
+  - `~/app/app.deps.ts`
+  - `~/app/app.ts`
+  - `~/app/static/scripts.js`
+  - `~/app/static/styles.css`
+
+- Added a separate file for the app templating.
+  - `~/app/index.ts`
+  - `~/src/Ana/Ana.ts`
+
+- Updated documentation
+  - `~/README.md`
   - `~/mod.ts`
+  - `~/src/Ana/Ana.ts`
+  - `~/src/Renderer.ts`

README.md

@@ -62,7 +62,7 @@ Thanks to TypeScript Magic, I defined an interface with a standard of good pract
   - [x]  Render SVG elements.
   - [x]  Publish library.
   - [x]  Render a static site in the server.
-  - [ ]  Add CSS and JS to the static site.
+  - [x]  Add CSS and JS to the static site.
   - [ ]  Render elements with event listeners.
 - [ ]  Reactivity: Make rendered elements reactive to a data state.
 - [ ]  Components: Add an architecture that supports reusable UI components.

app/app.deps.ts

@@ -0,0 +1,2 @@
+export * from 'https://deno.land/x/oak@v11.0.0/mod.ts';
+export * from 'https://deno.land/std@0.152.0/path/mod.ts';

app/app.ts

@@ -1,25 +1,19 @@
-import { Application, Router } from 'https://deno.land/x/oak@v10.6.0/mod.ts';
-import { Ana } from '../mod.ts';
+import { Application, Context, Router, send, join } from './app.deps.ts';
+import { index } from './index.ts';
 
 const app = new Application();
 const router = new Router();
 
-const ana = new Ana();
-const a = ana.render;
+router.get('/:path+', async (ctx: Context) => {
+  return await send(ctx, ctx.request.url.pathname, {
+    root: join(Deno.cwd(), 'app/static'),
+  });
+});
 
 router.get('/', (ctx) => {
-  ctx.response.body = ana.app(a.p('test')('test'));
+  ctx.response.body = index;
 });
 
 app.use(router.routes());
 
-app.use((ctx) => {
-  ctx.response.status = 404;
-  ctx.response.body = 'Page not found';
-});
-
-app.addEventListener('error', (evt) => {
-  console.log(evt.error);
-});
-
 await app.listen({ port: 3000 });

app/index.ts

@@ -0,0 +1,8 @@
+import { Ana } from '../mod.ts';
+
+const ana = new Ana();
+const a = ana.render;
+
+export const index = ana.app(
+  a.main()(a.h1()('Test').has({ id: 'clickable-title' }))
+);

app/static/scripts.js

@@ -0,0 +1,3 @@
+document
+  .getElementById('clickable-title')
+  .addEventListener('click', () => alert('clicked'));

app/static/styles.css

@@ -0,0 +1,3 @@
+h1 {
+  color: red;
+}

src/Ana/Ana.ts

@@ -33,7 +33,7 @@ export class Ana {
 
   //  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -
   /**
-   * This function is an extremely simplified html renderer. It receives a property in the following
+   * This proxy is an extremely simplified html renderer. It receives a property in the following
    * syntax: `a.div`. The renderer `a` is a mere ES6 Proxy Object using the get() method. It will have
    * intellisense functionalities thanks to the `Elements` Interface.
    *
@@ -45,11 +45,6 @@ export class Ana {
    * What is an "empty element"? It's not designed to have any other elements inside of it. Examples of
    * this are: `<input />`, `<img />`, `<link />`, `<meta />`, etc. This function renders these kinds of
    * elements. `a.input(class).has(attributes)`.
-   *
-   * @returns a Proxy that emulates a dictionary of render functions. Some properties of this dictionary
-   * render SVGElements, others render Empty Elements, and others render Elements that can be parents.
-   * If it "tries to access" property not defined inside this emulated dictionary, then it renders a
-   * custom Element, e.g. `<foo></foo>`.
    */
   render = new Proxy(
     {},
@@ -84,6 +79,12 @@ export class Ana {
     }
   ) as Elements;
 
+  //  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -
+  /**
+   *
+   * @param app
+   * @returns
+   */
   app = (app: Renderer): string => {
     const a = this.render;
 
@@ -96,9 +97,15 @@ export class Ana {
             name: 'viewport',
             content: 'width=device-width, initial-scale=1.0',
           }),
+          a.link().has({
+            rel: 'stylesheet',
+            href: '/styles.css',
+            type: 'text/css',
+          }),
           a.title()('Ana App')
         ),
-        a.body()(app)
+        a.body()(app),
+        a.script()().has({ type: 'text/javascript', src: '/scripts.js' })
       )
       .has({ lang: 'en' });
 

src/Renderer.ts

@@ -5,13 +5,10 @@
 //
 ////////////////////////////////////////////////////////////////////////////////////////////////////////
 
-import { dictionaryReduce } from './utils.ts';
-import { Attribute, Attributes, Child, Children } from './types.ts';
-
 /**
  * What is a Renderer? It is an object that holds data and renders HTML/SVG code with it. This class is the minimum abstraction of an element. Ana uses Renderers as the objects delivered by the `const a = ana.render` Proxy. Renderers are not immutable, as soon as they are created, they are modified to have css classes and children nodes added to them. Afterwards, you may add attributes with the `.has()` function.
  *
- * @example
+ * ### Example
  * ```TypeScript
  * const divRenderer = new Renderer('div', false, false)
  * divRenderer.render() // -> <div></div>
@@ -22,6 +19,15 @@ import { Attribute, Attributes, Child, Children } from './types.ts';
  * const svgRenderer = new Renderer('svg', true, false)
  * svgRenderer.render() // -> <svg xmnls="http://www.w3.org/2000/svg"></svg>
  * ```
+ *
+ * @module
+ */
+
+import { dictionaryReduce } from './utils.ts';
+import { Attribute, Attributes, Child, Children } from './types.ts';
+
+/**
+ * Renderer class
  */
 export class Renderer {
   constructor(