Pour tout problème contactez-nous par mail : support@froggit.fr | La FAQ :grey_question: | Rejoignez-nous sur le Chat :speech_balloon:

Skip to content
Snippets Groups Projects
Commit aa90fb60 authored by peter_rabbit's avatar peter_rabbit
Browse files

rendering lib

parent 5e10dd43
No related branches found
No related tags found
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 2361 additions and 14 deletions
gitignore → .gitignore
+ 1
− 1
View file @ aa90fb60
......@@ -2,4 +2,4 @@ bundle.js
*.map
*.css.map
src/**/*.css
node_modules/
\ No newline at end of file
node_modules
\ No newline at end of file
Dockerfile
+ 1
− 1
View file @ aa90fb60
......@@ -6,7 +6,7 @@ RUN rm -rf /usr/share/nginx/html/*
RUN apt-get update \
&& apt upgrade -y \
&& apt-get install nodejs npm -y \
&& npm install -g --silent browserify sass
&& npm install
WORKDIR /usr/share/nginx/html
......
Makefile
+ 4
− 1
View file @ aa90fb60
......@@ -18,4 +18,7 @@ bash:
docker exec -it kuadrado bash
web:
docker exec -it kuadrado bash -c "npm run web"
docker exec -it kuadrado bash -c "npm run build"
stylesheet:
docker exec -it kuadrado bash -c "npm run style"
build.js 0 → 100644
+ 50
− 0
View file @ aa90fb60
#!/usr/bin/env node
"use strict";
const fs = require("fs");
const browserify = require("browserify");
// Handle home page
const b = browserify();
b.add(`${process.cwd()}/src/main.js`)
.bundle()
.pipe(fs.createWriteStream(`${process.cwd()}/public/main.js`));
// Handle subpages
function getPageHtml(pagename) {
return `
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Kuadrado Software - ${pagename}</title>
<link href="../../style/style.css" rel="stylesheet" />
</head>
<body>
<main></main>
</body>
<script type="text/javascript" src="./${pagename}.js"></script>
</html>
`;
}
const files = fs.readdirSync(`${process.cwd()}/src/pages`);
for (const f of files) {
const fPath = `${process.cwd()}/src/pages/${f}`;
const targetDirPath = `${process.cwd()}/public/${f}`;
if (!fs.existsSync(targetDirPath)) {
fs.mkdirSync(targetDirPath);
}
const b = browserify();
b.add(fPath)
.bundle()
.pipe(fs.createWriteStream(`${targetDirPath}/${f}.js`));
const page = fs.createWriteStream(`${targetDirPath}/index.html`);
page.write(getPageHtml(f));
}
favicon.ico 0 → 100644
+ 0
− 0
View file @ aa90fb60
favicon.ico

4.66 KiB

package-lock.json 0 → 100644
+ 1668
− 0
View file @ aa90fb60
This diff is collapsed.
package.json
+ 7
− 3
View file @ aa90fb60
......@@ -5,12 +5,16 @@
"main": "src/main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"web": "browserify src/main.js -o public/bundle.js",
"style": "sass --watch ./src:style"
"style": "sass --watch ./src:style",
"build": "node build.js"
},
"repository": "https://gitlab.com/peter_rabbit/kuadrado-website",
"author": "Kuadrado",
"license": "MIT",
"homepage": "https://gitlab.com/peter_rabbit/kuadrado-website#readme",
"dependencies": {}
"dependencies": {},
"devDependencies": {
"browserify": "^17.0.0",
"sass": "^1.32.0"
}
}
public/bundle.js deleted 100644 → 0
+ 0
− 3
View file @ 5e10dd43
(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
console.log("hello kuadrado")
},{}]},{},[1]);
public/example/example.js 0 → 100644
+ 140
− 0
View file @ aa90fb60
(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
"use strict";
module.exports = {
setRenderCycleRoot(renderCycleRoot) {
this.renderCycleRoot = renderCycleRoot;
},
objectToHtml: function objectToHtml(obj) {
const { tag } = obj;
const node = document.createElement(tag);
const excludeKeys = ["tag", "contents", "style_rules", "state"];
Object.keys(obj)
.filter(attr => !excludeKeys.includes(attr))
.forEach(attr => {
if (attr === "class") {
node.classList.add(...obj[attr].split(" ").filter(s => s !== ""));
} else {
node[attr] = obj[attr];
}
});
if (obj.contents && typeof obj.contents === "string") {
node.innerHTML = obj.contents;
} else {
obj.contents &&
obj.contents.length > 0 &&
obj.contents.forEach(el => {
switch (typeof el) {
case "string":
node.innerHTML = el;
break;
case "object":
node.appendChild(objectToHtml(el));
break;
}
});
}
if (obj.style_rules) {
Object.keys(obj.style_rules).forEach(rule => {
node.style[rule] = obj.style_rules[rule];
});
}
return node;
},
renderCycle: function () {
this.subRender(this.renderCycleRoot.render(), document.getElementsByTagName("main")[0], {
mode: "replace",
});
},
subRender(object, htmlNode, options = { mode: "append" }) {
const insert = this.objectToHtml(object);
switch (options.mode) {
case "append":
htmlNode.appendChild(insert);
break;
case "override":
htmlNode.innerHTML = "";
htmlNode.appendChild(insert);
break;
case "insert-before":
htmlNode.insertBefore(insert, htmlNode.childNodes[options.insertIndex]);
break;
case "adjacent":
/**
* options.insertLocation must be one of:
*
* afterbegin
* afterend
* beforebegin
* beforeend
*/
htmlNode.insertAdjacentHTML(options.insertLocation, insert);
break;
case "replace":
htmlNode.parentNode.replaceChild(insert, htmlNode);
break;
case "remove":
htmlNode.remove();
break;
}
},
};
},{}],2:[function(require,module,exports){
"use strict";
class Example {
constructor(args) {
Object.assign(this, args);
}
render() {
return {
tag: "main",
contents: [
{
tag: "h1",
contents: "Example",
},
{
tag: "a",
href: "/public/",
contents: "Home",
},
{tag:"br"},
{
tag: "a",
href: "../example2/",
contents: "Example page 2",
},
],
};
}
}
module.exports = Example;
},{}],3:[function(require,module,exports){
"use strict";
"use strict";
const runPage = require("../../run-page");
const Example = require("./example");
runPage(Example);
},{"../../run-page":4,"./example":2}],4:[function(require,module,exports){
"use strict";
const objectHtmlRenderer = require("./lib/object-html-renderer");
module.exports = function runPage(PageComponent) {
const page = new PageComponent();
objectHtmlRenderer.setRenderCycleRoot(page);
objectHtmlRenderer.renderCycle();
};
},{"./lib/object-html-renderer":1}]},{},[3]);
public/example/index.html 0 → 100644
+ 14
− 0
View file @ aa90fb60
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Kuadrado Software - example</title>
<link href="../../style/style.css" rel="stylesheet" />
</head>
<body>
<main></main>
</body>
<script type="text/javascript" src="./example.js"></script>
</html>
\ No newline at end of file
public/example2/example2.js 0 → 100644
+ 140
− 0
View file @ aa90fb60
(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
"use strict";
module.exports = {
setRenderCycleRoot(renderCycleRoot) {
this.renderCycleRoot = renderCycleRoot;
},
objectToHtml: function objectToHtml(obj) {
const { tag } = obj;
const node = document.createElement(tag);
const excludeKeys = ["tag", "contents", "style_rules", "state"];
Object.keys(obj)
.filter(attr => !excludeKeys.includes(attr))
.forEach(attr => {
if (attr === "class") {
node.classList.add(...obj[attr].split(" ").filter(s => s !== ""));
} else {
node[attr] = obj[attr];
}
});
if (obj.contents && typeof obj.contents === "string") {
node.innerHTML = obj.contents;
} else {
obj.contents &&
obj.contents.length > 0 &&
obj.contents.forEach(el => {
switch (typeof el) {
case "string":
node.innerHTML = el;
break;
case "object":
node.appendChild(objectToHtml(el));
break;
}
});
}
if (obj.style_rules) {
Object.keys(obj.style_rules).forEach(rule => {
node.style[rule] = obj.style_rules[rule];
});
}
return node;
},
renderCycle: function () {
this.subRender(this.renderCycleRoot.render(), document.getElementsByTagName("main")[0], {
mode: "replace",
});
},
subRender(object, htmlNode, options = { mode: "append" }) {
const insert = this.objectToHtml(object);
switch (options.mode) {
case "append":
htmlNode.appendChild(insert);
break;
case "override":
htmlNode.innerHTML = "";
htmlNode.appendChild(insert);
break;
case "insert-before":
htmlNode.insertBefore(insert, htmlNode.childNodes[options.insertIndex]);
break;
case "adjacent":
/**
* options.insertLocation must be one of:
*
* afterbegin
* afterend
* beforebegin
* beforeend
*/
htmlNode.insertAdjacentHTML(options.insertLocation, insert);
break;
case "replace":
htmlNode.parentNode.replaceChild(insert, htmlNode);
break;
case "remove":
htmlNode.remove();
break;
}
},
};
},{}],2:[function(require,module,exports){
"use strict";
class Example2 {
constructor(args) {
Object.assign(this, args);
}
render() {
return {
tag: "main",
contents: [
{
tag: "h1",
contents: "Example 2",
},
{
tag: "a",
href: "/public/",
contents: "Home",
},
{ tag: "br" },
{
tag: "a",
href: "../example/",
contents: "Example page",
},
],
};
}
}
module.exports = Example2;
},{}],3:[function(require,module,exports){
"use strict";
const runPage = require("../../run-page");
const Example2 = require("./example2");
runPage(Example2);
},{"../../run-page":4,"./example2":2}],4:[function(require,module,exports){
"use strict";
const objectHtmlRenderer = require("./lib/object-html-renderer");
module.exports = function runPage(PageComponent) {
const page = new PageComponent();
objectHtmlRenderer.setRenderCycleRoot(page);
objectHtmlRenderer.renderCycle();
};
},{"./lib/object-html-renderer":1}]},{},[3]);
public/example2/index.html 0 → 100644
+ 14
− 0
View file @ aa90fb60
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Kuadrado Software - example2</title>
<link href="../../style/style.css" rel="stylesheet" />
</head>
<body>
<main></main>
</body>
<script type="text/javascript" src="./example2.js"></script>
</html>
\ No newline at end of file
public/index.html
+ 2
− 4
View file @ aa90fb60
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
......@@ -7,8 +6,7 @@
<link href="../style/style.css" rel="stylesheet" />
</head>
<body>
<div id="main-container">Hello Kuadrado !!</div>
<main></main>
</body>
<!--run "npm run web" to build bundle.js -->
<script type="text/javascript" src="bundle.js"></script>
<script type="text/javascript" src="main.js"></script>
</html>
public/main.js 0 → 100644
+ 134
− 0
View file @ aa90fb60
(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
"use strict";
class HomePage {
constructor(args) {
Object.assign(this, args);
}
render() {
return {
tag: "main",
contents: [
{
tag: "h1",
contents: "Kuadrado Software",
},
{
tag: "a",
href: "example/",
contents: "Example page",
},
],
};
}
}
module.exports = HomePage;
},{}],2:[function(require,module,exports){
"use strict";
module.exports = {
setRenderCycleRoot(renderCycleRoot) {
this.renderCycleRoot = renderCycleRoot;
},
objectToHtml: function objectToHtml(obj) {
const { tag } = obj;
const node = document.createElement(tag);
const excludeKeys = ["tag", "contents", "style_rules", "state"];
Object.keys(obj)
.filter(attr => !excludeKeys.includes(attr))
.forEach(attr => {
if (attr === "class") {
node.classList.add(...obj[attr].split(" ").filter(s => s !== ""));
} else {
node[attr] = obj[attr];
}
});
if (obj.contents && typeof obj.contents === "string") {
node.innerHTML = obj.contents;
} else {
obj.contents &&
obj.contents.length > 0 &&
obj.contents.forEach(el => {
switch (typeof el) {
case "string":
node.innerHTML = el;
break;
case "object":
node.appendChild(objectToHtml(el));
break;
}
});
}
if (obj.style_rules) {
Object.keys(obj.style_rules).forEach(rule => {
node.style[rule] = obj.style_rules[rule];
});
}
return node;
},
renderCycle: function () {
this.subRender(this.renderCycleRoot.render(), document.getElementsByTagName("main")[0], {
mode: "replace",
});
},
subRender(object, htmlNode, options = { mode: "append" }) {
const insert = this.objectToHtml(object);
switch (options.mode) {
case "append":
htmlNode.appendChild(insert);
break;
case "override":
htmlNode.innerHTML = "";
htmlNode.appendChild(insert);
break;
case "insert-before":
htmlNode.insertBefore(insert, htmlNode.childNodes[options.insertIndex]);
break;
case "adjacent":
/**
* options.insertLocation must be one of:
*
* afterbegin
* afterend
* beforebegin
* beforeend
*/
htmlNode.insertAdjacentHTML(options.insertLocation, insert);
break;
case "replace":
htmlNode.parentNode.replaceChild(insert, htmlNode);
break;
case "remove":
htmlNode.remove();
break;
}
},
};
},{}],3:[function(require,module,exports){
"use strict";
const HomePage = require("./homepage");
const runPage = require("./run-page");
runPage(HomePage);
},{"./homepage":1,"./run-page":4}],4:[function(require,module,exports){
"use strict";
const objectHtmlRenderer = require("./lib/object-html-renderer");
module.exports = function runPage(PageComponent) {
const page = new PageComponent();
objectHtmlRenderer.setRenderCycleRoot(page);
objectHtmlRenderer.renderCycle();
};
},{"./lib/object-html-renderer":2}]},{},[3]);
src/homepage.js 0 → 100644
+ 26
− 0
View file @ aa90fb60
"use strict";
class HomePage {
constructor(args) {
Object.assign(this, args);
}
render() {
return {
tag: "main",
contents: [
{
tag: "h1",
contents: "Kuadrado Software",
},
{
tag: "a",
href: "example/",
contents: "Example page",
},
],
};
}
}
module.exports = HomePage;
src/lib/object-html-renderer.js 0 → 100644
+ 84
− 0
View file @ aa90fb60
"use strict";
module.exports = {
setRenderCycleRoot(renderCycleRoot) {
this.renderCycleRoot = renderCycleRoot;
},
objectToHtml: function objectToHtml(obj) {
const { tag } = obj;
const node = document.createElement(tag);
const excludeKeys = ["tag", "contents", "style_rules", "state"];
Object.keys(obj)
.filter(attr => !excludeKeys.includes(attr))
.forEach(attr => {
if (attr === "class") {
node.classList.add(...obj[attr].split(" ").filter(s => s !== ""));
} else {
node[attr] = obj[attr];
}
});
if (obj.contents && typeof obj.contents === "string") {
node.innerHTML = obj.contents;
} else {
obj.contents &&
obj.contents.length > 0 &&
obj.contents.forEach(el => {
switch (typeof el) {
case "string":
node.innerHTML = el;
break;
case "object":
node.appendChild(objectToHtml(el));
break;
}
});
}
if (obj.style_rules) {
Object.keys(obj.style_rules).forEach(rule => {
node.style[rule] = obj.style_rules[rule];
});
}
return node;
},
renderCycle: function () {
this.subRender(this.renderCycleRoot.render(), document.getElementsByTagName("main")[0], {
mode: "replace",
});
},
subRender(object, htmlNode, options = { mode: "append" }) {
const insert = this.objectToHtml(object);
switch (options.mode) {
case "append":
htmlNode.appendChild(insert);
break;
case "override":
htmlNode.innerHTML = "";
htmlNode.appendChild(insert);
break;
case "insert-before":
htmlNode.insertBefore(insert, htmlNode.childNodes[options.insertIndex]);
break;
case "adjacent":
/**
* options.insertLocation must be one of:
*
* afterbegin
* afterend
* beforebegin
* beforeend
*/
htmlNode.insertAdjacentHTML(options.insertLocation, insert);
break;
case "replace":
htmlNode.parentNode.replaceChild(insert, htmlNode);
break;
case "remove":
htmlNode.remove();
break;
}
},
};
src/main.js
+ 6
− 1
View file @ aa90fb60
console.log("hello kuadrado")
\ No newline at end of file
"use strict";
const HomePage = require("./homepage");
const runPage = require("./run-page");
runPage(HomePage);
src/pages/example/example.js 0 → 100644
+ 32
− 0
View file @ aa90fb60
"use strict";
class Example {
constructor(args) {
Object.assign(this, args);
}
render() {
return {
tag: "main",
contents: [
{
tag: "h1",
contents: "Example",
},
{
tag: "a",
href: "/public/",
contents: "Home",
},
{tag:"br"},
{
tag: "a",
href: "../example2/",
contents: "Example page 2",
},
],
};
}
}
module.exports = Example;
src/pages/example/index.js 0 → 100644
+ 6
− 0
View file @ aa90fb60
"use strict";
"use strict";
const runPage = require("../../run-page");
const Example = require("./example");
runPage(Example);
src/pages/example2/example2.js 0 → 100644
+ 32
− 0
View file @ aa90fb60
"use strict";
class Example2 {
constructor(args) {
Object.assign(this, args);
}
render() {
return {
tag: "main",
contents: [
{
tag: "h1",
contents: "Example 2",
},
{
tag: "a",
href: "/public/",
contents: "Home",
},
{ tag: "br" },
{
tag: "a",
href: "../example/",
contents: "Example page",
},
],
};
}
}
module.exports = Example2;
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Froggit est fièrement fabriqué avec amour par Lydra avec des Logiciels Libres et hébergé en France chez Scaleway | Status du service