Ver Fonte

Create infrastructure for ui dev

Lee Morgan há 1 mês atrás
pai
commit
1b76dbb313
6 ficheiros alterados com 50 adições e 55 exclusões
  1. 1 19
      ui/build.html
  2. 30 35
      ui/createHtml.js
  3. 4 0
      ui/index.css
  4. 12 0
      ui/index.html
  5. 2 0
      ui/index.js
  6. 1 1
      ui/package.json

+ 1 - 19
ui/build.html

@@ -1,19 +1 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>My App</title>
-    <style>
-        body {
-            font-family: sans-serif;
-            max-width: 600px;
-            margin: 40px auto;
-            padding: 0 20px;
-        }
-    </style>
-</head>
-<body>
-    <h1>Hello!</h1>
-    <p>This is a simple page.</p>
-</body>
-</html>
+<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>My App</title> </head> <body> <h1>Hello!</h1> <p>This is a simple page.</p> <p id="something"></p> </body> </html> 

+ 30 - 35
ui/createHtml.js

@@ -4,43 +4,38 @@ import fsSync from "fs";
 
 const fs = fsSync.promises;
 
-export default async ()=>{
-    const esbuildProm = esbuild.build({
-        entryPoints: [`${global.cwd}/views/index.js`, `${global.cwd}/views/index.css`],
-        bundle: true,
-        minify: true,
-        sourcemap: process.env.NODE_ENV === "production",
-        write: false,
-        outdir: `${global.cwd}/views/build/`
-    });
-    const htmlProm = fs.readFile(`${import.meta.dirname}/views/index.html`, "utf-8");
-    const [build, html] = await Promise.all([esbuildProm, htmlProm]);
+const esbuildProm = esbuild.build({
+    entryPoints: [`./index.js`, `./index.css`],
+    bundle: true,
+    minify: true,
+    sourcemap: false,
+    write: false,
+    outdir: `.`
+});
+const htmlProm = fs.readFile(`${import.meta.dirname}/index.html`, "utf-8");
+const [build, html] = await Promise.all([esbuildProm, htmlProm]);
 
-    let js, css;
-    for(let i = 0; i < build.outputFiles.length; i++){
-        if(build.outputFiles[i].path.endsWith(".js")){
-            js = build.outputFiles[i].text;
-        }else if(build.outputFiles[i].path.endsWith(".css")){
-            css = build.outputFiles[i].text;
-        }
+let js, css;
+for(let i = 0; i < build.outputFiles.length; i++){
+    if(build.outputFiles[i].path.endsWith(".js")){
+        js = build.outputFiles[i].text;
+    }else if(build.outputFiles[i].path.endsWith(".css")){
+        css = build.outputFiles[i].text;
     }
+}
 
-    let data = await htmlMinifier.minify(html, {
-        collapseBooleanAttributes: true,
-        collapseInlineTagWhitespace: true,
-        collapseWhitespace: true,
-        conservativeCollapse: true,
-        decodeEntities: true,
-        noNewlinesBeforeTagClose: true,
-        removeComments: true
-    });
-
-    data = data.replace('<script src="/index.js"></script>', `<script>${js}</script>`);
-    data = data.replace('<link rel="stylesheet" href="/index.css">', `<style>${css}</style>`);
+let data = await htmlMinifier.minify(html, {
+    collapseBooleanAttributes: true,
+    collapseInlineTagWhitespace: true,
+    collapseWhitespace: true,
+    conservativeCollapse: true,
+    decodeEntities: true,
+    noNewlinesBeforeTagClose: true,
+    removeComments: true
+});
+console.log(data);
 
-    if(process.env.NODE_ENV !== "production"){
-        fs.writeFile(`${import.meta.dirname}/build.html`, data);
-    }
+data = data.replace('<script></script>', `<script>${js}</script>`);
+data = data.replace('<link rel="stylesheet">', `<style>${css}</style>`);
 
-    return data;
-}
+fs.writeFile(`${import.meta.dirname}/build.html`, data);

+ 4 - 0
ui/index.css

@@ -0,0 +1,4 @@
+body{
+    background: orange;
+    color: black;
+}

+ 12 - 0
ui/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>My App</title>
+</head>
+<body>
+    <h1>Hello!</h1>
+    <p>This is a simple page.</p>
+    <p id="something"></p>
+</body>
+</html>

+ 2 - 0
ui/index.js

@@ -0,0 +1,2 @@
+console.log("something");
+document.getElementById("something").textContent = "Something";

+ 1 - 1
ui/package.json

@@ -9,7 +9,7 @@
   "keywords": [],
   "author": "",
   "license": "ISC",
-  "type": "commonjs",
+  "type": "module",
   "dependencies": {
     "esbuild": "^0.28.1",
     "html-minifier-terser": "^7.2.0"