transfer render to bundle

Author: devgutt

bundle/package-lock.json

@@ -17,7 +17,8 @@
   ],
   "dependencies": {
     "regenerator-runtime": "^0.13.7",
-    "wdr-loader": "file:../../wdr-loader"
+    "wdr-loader": "file:../../wdr-loader",
+    "wdr-render-basic": "file:.."
   },
   "devDependencies": {
     "@babel/cli": "^7.10.1",

bundle/package.json

@@ -1,11 +1,92 @@
 import 'regenerator-runtime/runtime';
 
 import loader from 'wdr-loader';
-
-const render = require("../../src/Render");
+import render from 'wdr-render-basic';
 
 import './main.css';
 
 loader(data => {
-    render(data);
+    const dataManager = render.createDataManager(data);
+
+    render.appendElement(document.head, [
+        render.createElement('meta', { charset: "utf-8" }),
+        render.createElement('meta', { name: "viewport", content: "width=device-width", 'initial-scale': 1 }),
+        render.createElement('title', {}, (data['#title'] || data['title']))
+    ]);
+
+    if (data['#render'] && data['#render'].css) {
+        render.appendElement(document.head, render.createElement('link', { rel: "stylesheet", href: data['#render'].css }));
+    }
+
+    const main = render.createElement('main', {});
+    render.appendElement(document.body, main);
+
+    renderItem(dataManager, main, '', data, 0);
 });
+
+function renderItem(dataManager, parent, key, value, level) {
+
+    if (Array.isArray(value)) {
+
+        const section = render.createElement('div', { class: key });
+        render.appendElement(parent, section);
+
+        value.forEach(v => {
+            if (typeof v == 'object') {
+                const sectionItem = render.createElement('div', {});
+                render.appendElement(section, sectionItem);
+                renderItem(dataManager, sectionItem, key, v, level);
+            } else {
+                renderItem(dataManager, section, null, v, level);
+            }
+        })
+
+    } else if (typeof value == 'object') {
+
+        let p = parent;
+        if (level == 1) {
+            p = render.createElement('section', { class: key });
+            render.appendElement(parent, [render.createElement('a', { name: key }, ""), p]);
+        } else if (level > 1) {
+            p = render.createElement('div', { class: key });
+            render.appendElement(parent, p);
+        }
+
+        for (const k in value) {
+            if (value.hasOwnProperty(k)) {
+                if (k.startsWith('#')) continue;
+                renderItem(dataManager, p, k, value[k], level + 1);
+            }
+        }
+
+    } else {
+
+        if (value !== undefined) {
+
+            let e;
+            if (key == 'title') {
+                e = render.createElement(`h${level < 6 ? level : '6'}`, { class: key });
+            } else {
+                e = render.createElement('p', { class: key });
+            }
+            render.appendElement(parent, e);
+
+            setValue(dataManager, e, value + "");
+
+        }
+
+    }
+}
+
+function setValue(dataManager, el, str) {
+    if (!str.includes('{{')) {
+        el.innerHTML = render.textFormatting(str)
+    } else {
+        el.innerHTML = render.textFormatting(str.replace(/{{[^{}]+}}/g, "..."));
+        render.processHyperData(dataManager, str)
+            .then(s => el.innerHTML = render.textFormatting(s))
+            .catch(error => {
+                console.error(error);
+            });
+    }
+}

bundle/src/index.js

@@ -1,5 +1,10 @@
+const el = require('./src/Elements');
+
 module.exports = {
-    render : require('./src/Render.js'),
-    el : require('./src/Elements.js'),
-    textFormatting : require('./src/TextFormatting.js')
+    createDataManager : require('./src/DataManager'),
+    createElement: el.createElement,
+    appendElement: el.appendElement,
+    loadScript: el.loadScript,
+    textFormatting : require('./src/TextFormatting'),
+    processHyperdata: require('./src/Hyperdata')
 }

index.js

@@ -1,36 +1,23 @@
 'use strict';
 
-function createDataManager(defaultData) {
+function createDataManager() {
 
-    const DATA = {
-        _: defaultData
-    }
+    const DATA = {}
 
-    async function getData(url) {
+    async function getDataUrl(url) {
 
         if (url) {
             if (DATA[url] == undefined) {
                 DATA[url] = fetch(url)
                     .then(r => r.json());
             }
             return DATA[url];
-
-        } else {
-            return DATA['_'];
         }
-
-    }
-
-    async function getValue(url, path) {
-
-        const data = await getData(url);
-        const ret = path.split(".").reduce((acc, cur) => acc[(cur+"").trim()], data);
-        return ret;
     }
 
     return {
-        getData: getData,
-        getValue: getValue
+        getDataUrl: getDataUrl
     }
 }
 
+module.exports = createDataManager;

src/DataManager.js

@@ -40,7 +40,7 @@ function createElementDoc(type) {
     }
 }
 
-function append(parent, children) {
+function appendElement(parent, children) {
     if (Array.isArray(children)) {
         children.forEach(item => {
             item && parent.appendChild(item);
@@ -60,7 +60,7 @@ function loadScript(url, onload) {
 }
 
 module.exports = {
-    create: createElement,
-    append: append,
-    loadScript: loadScript
+    createElement,
+    appendElement,
+    loadScript
 }

src/Elements.js

@@ -1,6 +1,6 @@
 'use strict';
 
-async function processHyperData(dataManager, str) {
+async function processHyperdata(dataManager, str) {
     const reg = /([\\]?){{\ *(?:\[([^{}]+)\]\ *)?([^{}]+)\ *}}/g;
 
     const ret = [];
@@ -16,7 +16,7 @@ async function processHyperData(dataManager, str) {
             const url = match[2];
             const path = match[3];
             try {
-                ret.push(await dataManager.getValue(url, path));
+                ret.push(await getValue(dataManager, url, path));
             } catch (error) {
                 ret.push("[ERROR]");
             }
@@ -31,4 +31,11 @@ async function processHyperData(dataManager, str) {
     return ret.join("");
 }
 
-module.exports = processHyperData;
+async function getValue(dataManager, url, path) {
+
+    const data = url ? await dataManager.getDataUrl(url) : dataManager.data;
+    const ret = path.split(".").reduce((acc, cur) => acc[(cur+"").trim()], data);
+    return ret;
+}
+
+module.exports = processHyperdata;