Merge pull request #31 from ItzNotABug/update-sample-function

Update Sample Function

function/README.md

@@ -9,7 +9,7 @@ This is an Appwrite Function demonstrating the `AppExpress` framework.
 
 ## Building
 
-`cd` in to `functions` directory & run below to create a `code.tar.gz` :
+`cd` in to `function` directory & run below to create a `code.tar.gz` :
 
 ```shell
 tar --exclude code.tar.gz --exclude node_modules -czf code.tar.gz .
@@ -20,7 +20,7 @@ Note: You can also use `appwrite-cli` to push this function directly.
 Finally, create a deployment if uploading manually, below are the config details -
 
 1. Endpoint - `index.js`
-2. Build Commands - `npm install`
+2. Build Commands - `npm install --omit=dev`
 
 ## Live Function Testing
 

function/index.js

@@ -1,7 +1,8 @@
 import AppExpress from '@itznotabug/appexpress';
 
-// misc
+// engines, middlewares, etc.
 import setEngines from './utils/engines.js';
+import setMiddlewares from './utils/middlewares.js';
 
 // routes
 import indexRouteHandler from './routes/index.js';
@@ -11,23 +12,12 @@ import { registeredRoutes } from './utils/routes.js';
 import redirectRouteHandler from './routes/redirect.js';
 import versionsRouteHandler from './routes/versions.js';
 
-// middlewares
-import { favIconMiddleware } from './middlewares/favicon.js';
-import { authUserForConsoleMiddleware } from './middlewares/auth.js';
-
 const express = new AppExpress();
 
 setEngines(express);
+setMiddlewares(express);
 express.views('views');
-// excluding the favicon cz we have a middleware for that.
-express.static('public', ['favicon.ico']);
-
-// enabled by default.
-express.compression(true);
-
-// custom middlewares
-express.middleware(favIconMiddleware);
-express.middleware(authUserForConsoleMiddleware);
+express.static('public');
 
 // using router for management.
 express.use('/', indexRouteHandler);
@@ -42,7 +32,9 @@ express.get('/ping', (_, res) => res.send('pong'));
 express.post('/pong', (_, res) => res.send('ping'));
 express.all('/all', (req, res) => res.send('same for all'));
 express.get('/dump', (req, res) => res.json(JSON.parse(req.dump())));
-express.get('/routes', (_, res) => {
+express.get('/routes', (req, res) => {
+    const { excludeMinify = true } = req.query;
+    res.setHeaders({ 'exclude-minify': excludeMinify });
     res.send(JSON.stringify(registeredRoutes, null, 2));
 });
 

function/package.json

@@ -1,6 +1,6 @@
 {
   "name": "appexpress-function",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "A demo function to showcase `appexpress` framework.",
   "author": "@itznotabug",
   "type": "module",
@@ -14,15 +14,20 @@
     "singleQuote": true
   },
   "dependencies": {
-    "pug": "3.0.2",
     "ejs": "3.1.10",
+    "pug": "3.0.2",
     "etag": "1.8.1",
     "fresh": "0.5.2",
     "showdown": "2.1.0",
     "express-hbs": "2.5.0",
-    "@itznotabug/appexpress": "0.2.4"
+    "@itznotabug/appexpress": "0.2.5",
+    "@itznotabug/appexpress-jsx": "^0.0.4",
+    "@itznotabug/appexpress-favicon": "^0.0.2",
+    "@itznotabug/appexpress-minifier": "^0.0.2",
+    "@itznotabug/appexpress-nocookies": "^0.0.2"
   },
   "devDependencies": {
-    "prettier": "3.2.5"
+    "prettier": "3.2.5",
+    "@types/react": "^18.3.2"
   }
 }

function/public/styles.css

@@ -0,0 +1,69 @@
+@import url(https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap);
+
+html {
+    height: 100%;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    margin: 0;
+    background: linear-gradient(135deg, #000, #f02e65);
+    font-family: Roboto, sans-serif;
+    color: #fff;
+    overflow: auto;
+}
+
+.container {
+    text-align: center;
+    max-width: 600px;
+    padding: 20px;
+}
+
+.logo {
+    font-size: 3rem;
+    font-weight: 700;
+    color: inherit;
+}
+
+.slogan {
+    font-size: 1.2rem;
+    margin-top: 20px;
+    line-height: 1.75;
+}
+
+.action-button {
+    margin-top: 40px;
+    padding: 12px 24px;
+    font-size: 1.1rem;
+    border: 2px solid #fff;
+    background-color: transparent;
+    color: #fff;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    outline: 0;
+    border-radius: 25px;
+}
+
+.action-button:hover {
+    background-color: #fff;
+    color: #000;
+}
+
+footer {
+    text-align: center;
+    padding: 20px 0;
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    font-size: 0.8rem;
+}
+
+footer a {
+    color: #fff;
+}

function/routes/index.js

@@ -4,32 +4,30 @@ const router = new AppExpress.Router();
 
 // index content.
 const indexContent =
-    '<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>AppExpress</title><style>@import url(https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap);html{height:100%;margin:0;padding:0}body{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;margin:0;background:linear-gradient(135deg,#000,#f02e65);font-family:Roboto,sans-serif;color:#fff;overflow:auto}.container{text-align:center;max-width:600px;padding:20px}.logo{font-size:3rem;font-weight:700;color:inherit}.slogan{font-size:1.2rem;margin-top:20px;line-height:1.75}.action-button{margin-top:40px;padding:12px 24px;font-size:1.1rem;border:2px solid #fff;background-color:transparent;color:#fff;cursor:pointer;transition:all .3s ease;outline:0;border-radius:25px}.action-button:hover{background-color:#fff;color:#000}footer{text-align:center;padding:20px 0;position:absolute;bottom:0;width:100%;font-size:.8rem}footer a{color:#fff}</style></head><body><div class="container"><div class="logo">AppExpress</div><div class="slogan">An <code style="font-size:16px">`express.js`</code> like framework for<br>Appwrite Functions, enabling super-easy navigation!</div><button class="action-button" onclick="learnMore()">Learn More</button></div><footer>Built by <a href="https://github.com/itznotabug" target="_blank">@ItzNotABug</a><p>This is rendered from a raw html string.</p></footer><script>function learnMore(){window.open("https://github.com/itznotabug/appexpress","_blank")}</script></body></html>';
+    '<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>AppExpress</title><link rel="stylesheet" type="text/css" href="/styles.css"></head><body><div class="container"><div class="logo">AppExpress</div><div class="slogan">An<code style="font-size:16px">`express.js`</code>like framework for<br>Appwrite Functions, enabling super-easy navigation!</div><button class="action-button" onclick="learnMore()">Learn More</button></div><footer>Built by<a href="https://github.com/itznotabug" target="_blank">@ItzNotABug</a><p>This is rendered from a raw html string.</p></footer><script>function learnMore(){window.open("https://github.com/itznotabug/appexpress","_blank")}</script></body></html>';
 
 router.get('/', (req, res) => {
     const { type } = req.query;
     switch (type) {
-        default:
-            res.html(indexContent);
-            return;
-        case 'string':
-            res.html(indexContent);
-            return;
         case 'html':
             res.sendFile('index.html');
-            return;
+            break;
+        case 'string':
+        default:
+            res.send(indexContent, 200, 'text/html');
+            break;
+        case 'js':
+        case 'jsx':
+        case 'tsx':
         case 'ejs':
-            res.render('index.ejs', buildContent('ejs'));
-            return;
         case 'hbs':
-            res.render('index.hbs', buildContent('hbs'));
-            return;
         case 'pug':
-            res.render('index.pug', buildContent('pug'));
-            return;
         case 'md':
-            res.render('index.md', buildContent('markdown'));
-            return;
+            res.render(
+                `index.${type}`,
+                buildContent(type === 'md' ? 'markdown' : type),
+            );
+            break;
     }
 });
 

function/utils/engines.js

@@ -4,6 +4,7 @@ import ejs from 'ejs';
 import pug from 'pug';
 import hbs from 'express-hbs';
 import showdown from 'showdown';
+import jsx from '@itznotabug/appexpress-jsx';
 
 const showdownConverter = () => {
     const converter = new showdown.Converter();
@@ -15,6 +16,7 @@ export default (express) => {
     express.engine('ejs', ejs);
     express.engine('pug', pug);
     express.engine('hbs', hbs.express4());
+    express.engine(['js', 'jsx', 'tsx'], jsx.engine);
 
     // a custom engine with showdown to render Markdown.
     express.engine('md', (filePath, options, callback) => {

function/utils/middlewares.js

@@ -0,0 +1,33 @@
+import favIcon from '@itznotabug/appexpress-favicon';
+import minifier from '@itznotabug/appexpress-minifier';
+import noCookies from '@itznotabug/appexpress-nocookies';
+import { authUserForConsoleMiddleware } from '../middlewares/auth.js';
+
+export default (express) => {
+    favIconMiddleware(express);
+    minifierMiddleware(express);
+    express.middleware(noCookies.middleware);
+    express.middleware(authUserForConsoleMiddleware);
+};
+
+const favIconMiddleware = (express) => {
+    favIcon.options({
+        iconPath: 'icons/favicon.ico',
+    });
+
+    express.middleware(favIcon.middleware);
+};
+
+const minifierMiddleware = (express) => {
+    minifier.options({
+        htmlOptions: {
+            minifyJS: true,
+            minifyCSS: true,
+            removeComments: true,
+            collapseWhitespace: true,
+            preserveLineBreaks: false,
+        },
+    });
+
+    express.middleware(minifier.middleware);
+};

function/utils/routes.js

@@ -6,7 +6,7 @@ const METHODS = {
     OPTIONS: 'OPTIONS',
 };
 
-const HOMEPAGE_SUBPATHS = ['/robots.txt', '/favicon.ico'];
+const HOMEPAGE_SUBPATHS = ['/robots.txt', '/favicon.ico', '/styles.css'];
 
 function addIfNotEmpty(target, key, value) {
     if (value && Object.keys(value).length > 0) {
@@ -30,7 +30,17 @@ export const registeredRoutes = {
         subPaths: HOMEPAGE_SUBPATHS,
         query: {
             type: 'string',
-            acceptable: ['md', 'ejs', 'hbs', 'pug', 'html', 'string'],
+            values: [
+                'js',
+                'md',
+                'ejs',
+                'hbs',
+                'pug',
+                'jsx',
+                'tsx',
+                'html',
+                'string',
+            ],
         },
     }),
     '/all': createRoute([