Merge pull request #280 from podium-lib/next

Release version 5

.eslintignore

@@ -1,3 +1,5 @@
+tap-snapshots/
 coverage/
-coverage
-tap-snapshots
+benchmark/
+example/
+dist/

.eslintrc

@@ -1,18 +1,20 @@
 {
-  "root": true,
   "extends": ["airbnb-base", "prettier"],
-  "overrides": [
-    {
-      "files": "__tests__/**/*",
-      "env": {
-        "jest": true
-      }
-    }
-  ],
   "plugins": ["prettier"],
-  "rules": {
-    "strict": [0, "global"],
-    "class-methods-use-this": [0],
-    "no-param-reassign": [0]
+  "parser": "@babel/eslint-parser",
+  "parserOptions": {
+      "requireConfigFile": false,
+      "ecmaVersion": 2020,
+      "sourceType": "module"
+  },
+"rules": {
+  "default-param-last": [0],
+  "import/prefer-default-export": "off",
+  "class-methods-use-this": [0],
+  "lines-between-class-members": [0],
+  "import/extensions": ["error", {
+        "js": "ignorePackages"
+      }
+    ]
   }
 }

.github/workflows/publish.yml

@@ -17,7 +17,7 @@ jobs:
   - name: Setup Node.js
     uses: actions/setup-node@v3
     with:
-      node-version: 16.x
+      node-version: 20.x
   - name: npm install
     run: |
       npm install
@@ -38,7 +38,7 @@ jobs:
   - name: Setup Node.js
     uses: actions/setup-node@v3
     with:
-      node-version: 16.x
+      node-version: 20.x
   - name: npm install
     run: |
       npm install

.github/workflows/test.yml

@@ -8,7 +8,7 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest, macOS-latest, windows-latest]
-        node-version: [12.x, 14.x, 16.x]
+        node-version: [16.x, 18.x, 20.x]
     steps:
       - uses: actions/checkout@v3
       - name: Use Node.js ${{ matrix.node-version }}

.gitignore

@@ -12,4 +12,6 @@ node_modules/**/*
 tmp/**/*
 .idea
 .idea/**/*
-coverage
+coverage
+dist
+.tap

README.md

@@ -1,4 +1,4 @@
-# @podium/layout
+# @podium/layout v5
 
 A Module for composing full page layouts out of page fragments in a micro frontend
 architecture.

example/extending/custom-context.js

@@ -1,5 +1,3 @@
-'use strict';
-
 const CustomContextParser = class CustomContextParser {
     get [Symbol.toStringTag]() {
         return 'CustomContextParser';
@@ -12,4 +10,4 @@ const CustomContextParser = class CustomContextParser {
     }
 };
 
-module.exports = CustomContextParser;
+export default CustomContextParser;

example/extending/custom-layout.js

@@ -1,7 +1,5 @@
-'use strict';
-
-const CustomContext = require('./custom-context');
-const PodiumLayout = require("../..");
+import CustomContext from './custom-context.js';
+import PodiumLayout from '../../lib/layout.js';
 
 const CustomLayout = class CustomLayout extends PodiumLayout {
     constructor(name) {
@@ -17,4 +15,4 @@ const CustomLayout = class CustomLayout extends PodiumLayout {
     }
 };
 
-module.exports = CustomLayout;
+export default CustomLayout;

example/server/server.js

@@ -1,11 +1,8 @@
 /* eslint-disable import/no-extraneous-dependencies */
 /* eslint-disable no-console */
-
-'use strict';
-
-const express = require('express');
-const path = require('path');
-const Layout = require("../..");
+import express from 'express';
+import Layout from '../../lib/layout.js';
+import template from './views/template.js';
 
 const layout = new Layout({
     pathname: '/foo',
@@ -38,52 +35,30 @@ const footer = layout.client.register({
     resolveCss: true,
 });
 
+layout.css({ value: '/foo/assets/grid.css' });
+
 const app = express();
 
-app.set('view engine', 'hbs');
-app.set('views', path.resolve(__dirname, './views/'));
+app.use(layout.pathname(), layout.middleware());
+
+app.get(`${layout.pathname()}/:bar?`,async (req, res, next) => {
+    const incoming = res.locals.podium;
+    const podlets = await Promise.all([
+        header.fetch(incoming),
+        menu.fetch(incoming),
+        content.fetch(incoming),
+        footer.fetch(incoming),
+    ]);
 
-/*
-app.use((req, res, next) => {
-    res.locals.locale = 'nb-NO';
-    next();
-});
-*/
+    incoming.view = {
+        title: 'Example application',
+    };
 
-app.use(layout.pathname(), layout.middleware());
+    incoming.podlets = podlets;
 
-app.get(
-    `${layout.pathname()}/:bar?`,
-    (req, res, next) => {
-        const ctx = res.locals.podium.context;
-        Promise.all([
-            content.fetch(ctx),
-            header.fetch(ctx),
-            menu.fetch(ctx),
-            footer.fetch(ctx),
-        ])
-            .then(result => {
-                res.locals = {
-                    title: 'Podium - Layout',
-                    podlets: {
-                        content: result[0],
-                        header: result[1],
-                        menu: result[2],
-                        footer: result[3],
-                    },
-                };
-                next();
-            })
-            .catch(error => {
-                next(error);
-            });
-    },
-    (req, res) => {
-        res.locals.css = layout.client.css();
-        res.locals.js = layout.client.js();
-        res.status(200).render('layout', res.locals);
-    },
-);
+    const markup = template(podlets);
+    res.status(200).podiumSend(markup);
+});
 
 app.use(`${layout.pathname()}/assets`, express.static('assets'));
 

example/server/views/template.js

@@ -0,0 +1,24 @@
+const template = (podlets = []) => {
+    return `
+        <div class="container">
+            <div class="row">
+                <div class="col-12">
+                    ${podlets[0].content}
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-4">
+                    ${podlets[1].content}
+                </div>
+                <div class="col-8">
+                    ${podlets[2].content}
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-12">
+                    ${podlets[3].content}
+                </div>
+            </div>
+        </div>`;
+}
+export default template;