leanweb 2.0.4 → 3.0.0

package/commands/addpage.js

@@ -0,0 +1,49 @@
+import path from 'path';
+import { fileURLToPath } from 'url';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+import { createRequire } from "module";
+const require = createRequire(import.meta.url);
+
+import fs from 'fs';
+import * as utils from './utils.js';
+
+(async () => {
+  const args = process.argv;
+  if (args.length < 3) {
+    console.error('Usage: lw addpage page names');
+    return;
+  }
+
+  const leanwebJSONPath = `${process.cwd()}/${utils.dirs.src}/leanweb.json`;
+  const leanwebJSON = require(leanwebJSONPath);
+  const pages = args.slice(2);
+
+  const projectName = path.basename(path.resolve());
+
+  leanwebJSON.pages = leanwebJSON.pages ?? [];
+  for (const pageJSON of leanwebJSON.pages) {
+    for (const page of pages) {
+      if (pageJSON === page) {
+        console.error(`Error: page ${pageJSON} existed.`);
+        return;
+      }
+    }
+  }
+
+  leanwebJSON.pages.push(...pages);
+  fs.writeFileSync(leanwebJSONPath, JSON.stringify(leanwebJSON, null, 2));
+
+  for (const page of pages) {
+    const pageName = utils.getComponentName(page);
+    const pagePath = `${utils.dirs.src}/${utils.getComponentPath(page)}`;
+    fs.mkdirSync(pagePath, { recursive: true });
+    if (!fs.existsSync(`${pagePath}/${pageName}.html`)) {
+      let htmlString = fs.readFileSync(`${__dirname}/../templates/page.html`, 'utf8');
+      htmlString = htmlString.replace(/\$\{project\.name\}/g, projectName);
+      htmlString = htmlString.replace(/\$\{page\.name\}/g, pageName);
+      htmlString = htmlString.replace(/\$\{pathLevels\}/g, utils.getPathLevels(page));
+      fs.writeFileSync(`${pagePath}/${pageName}.html`, htmlString);
+    }
+  }
+})();

package/commands/build.js

@@ -10,95 +10,77 @@ import fse from 'fs-extra';
 import { minify } from 'html-minifier';
 import * as utils from './utils.js';
 import * as parser from '../lib/lw-html-parser.js';
-import CleanCSS from 'clean-css';
 
-(async () => {
-  let env;
-  const args = process.argv;
-  if (args.length >= 3) {
-    env = args[2];
-  }
+let env;
+const args = process.argv;
+if (args.length >= 3) {
+  env = args[2];
+}
 
-  const leanwebPackageJSON = require(`${__dirname}/../package.json`);
+const leanwebPackageJSON = require(`${__dirname}/../package.json`);
 
-  const buildModule = (projectPath) => {
+const buildModule = (projectPath) => {
 
-    const project = require(`${projectPath}/${utils.dirs.src}/leanweb.json`);
+  const project = require(`${projectPath}/${utils.dirs.src}/leanweb.json`);
 
-    fs.mkdirSync(utils.dirs.build, { recursive: true });
+  fs.mkdirSync(utils.dirs.build, { recursive: true });
 
-    const copySrc = () => {
-      fse.copySync(`${projectPath}/${utils.dirs.src}/`, utils.dirs.build, { filter: utils.copyFilter });
-    };
+  const copySrc = () => {
+    fse.copySync(`${projectPath}/${utils.dirs.src}/`, utils.dirs.build, { filter: utils.copyFilter });
+  };
 
-    const copyEnv = () => {
-      if (env) {
-        fse.copySync(`${utils.dirs.build}/env/${env}.js`, `${utils.dirs.build}/env.js`, { filter: utils.copyFilter });
-      }
-    };
+  const copyEnv = () => {
+    if (env) {
+      fse.copySync(`${utils.dirs.build}/env/${env}.js`, `${utils.dirs.build}/env.js`, { filter: utils.copyFilter });
+    }
+  };
 
-    const buildJS = () => {
-      const jsString = project.components.reduce((acc, cur) => {
-        const cmpName = utils.getComponentName(cur);
-        let importString = `import './components/${cur}/${cmpName}.js';`;
-        return acc + importString + '\n';
-      }, '');
-      utils.writeIfChanged(`${utils.dirs.build}/${project.name}.js`, jsString);
-    };
+  const buildJS = () => {
+    const jsString = project.components.reduce((acc, cur) => {
+      const cmpName = utils.getComponentName(cur);
+      let importString = `import './components/${cur}/${cmpName}.js';`;
+      return acc + importString + '\n';
+    }, '');
+    utils.writeIfChanged(`${utils.dirs.build}/${project.name}.js`, jsString);
+  };
 
-    const buildHTML = () => {
-      project.components.forEach(cmp => {
-        const cmpName = utils.getComponentName(cmp);
-        const htmlFilename = `${utils.dirs.build}/components/${cmp}/${cmpName}.html`;
-        const htmlFileExists = fs.existsSync(htmlFilename);
-        if (htmlFileExists) {
-          const scssFilename = `${utils.dirs.build}/components/${cmp}/${cmpName}.scss`;
-          const scssFileExists = fs.existsSync(scssFilename);
-          let cssString = '';
-          if (scssFileExists) {
-            let scssString = `@use "global-styles.scss";\n`;
-            scssString += fs.readFileSync(scssFilename, 'utf8');
-            scssString += '\n[lw-false],[lw-for]{display:none !important;}\n';
-            cssString = utils.buildCSS(scssString, utils.dirs.build, `${utils.dirs.build}/components/${cmp}`);
-          }
-          const htmlString = fs.readFileSync(htmlFilename, 'utf8');
-          const minifiedHtml = minify(htmlString, {
-            caseSensitive: true,
-            collapseWhitespace: true,
-            minifyCSS: true,
-            minifyJS: true,
-            removeComments: true,
-          });
-          const ast = parser.parse(minifiedHtml);
-          const minifiedCss = new CleanCSS({}).minify(cssString ?? '');
-          ast.css = minifiedCss.styles ?? '';
-          ast.componentFullName = project.name + '-' + cmp.replace(/\//g, '-');
-          ast.runtimeVersion = project.version;
-          ast.builderVersion = leanwebPackageJSON.version;
-          utils.writeIfChanged(`${utils.dirs.build}/components/${cmp}/ast.js`, `export default ${JSON.stringify(ast, null, 0)};`);
+  const buildHTML = () => {
+    project.components.forEach(cmp => {
+      const cmpName = utils.getComponentName(cmp);
+      const htmlFilename = `${utils.dirs.build}/components/${cmp}/${cmpName}.html`;
+      const htmlFileExists = fs.existsSync(htmlFilename);
+      if (htmlFileExists) {
+        const cssFilename = `${utils.dirs.build}/components/${cmp}/${cmpName}.css`;
+        const cssFileExists = fs.existsSync(cssFilename);
+        let cssString = `@import "global-styles.css";\n`;
+        if (cssFileExists) {
+          cssString += fs.readFileSync(cssFilename, 'utf8');
         }
-      });
-    };
-
-    const buildSCSS = () => {
-      const projectScssFilename = `${projectPath}/${utils.dirs.src}/${project.name}.scss`;
-      let projectCssString = '';
-      if (fs.existsSync(projectScssFilename)) {
-        const projectScssString = fs.readFileSync(projectScssFilename, 'utf8');
-        projectCssString += utils.buildCSS(projectScssString, utils.dirs.build);
+        cssString += '\n[lw-false],[lw-for]{display:none !important;}\n';
+        const htmlString = fs.readFileSync(htmlFilename, 'utf8');
+        const minifiedHtml = minify(htmlString, {
+          caseSensitive: true,
+          collapseWhitespace: true,
+          minifyCSS: true,
+          minifyJS: true,
+          removeComments: true,
+        });
+        const ast = parser.parse(minifiedHtml);
+        ast.css = cssString;
+        ast.componentFullName = project.name + '-' + cmp.replace(/\//g, '-');
+        ast.runtimeVersion = project.version;
+        ast.builderVersion = leanwebPackageJSON.version;
+        utils.writeIfChanged(`${utils.dirs.build}/components/${cmp}/ast.js`, `export default ${JSON.stringify(ast, null, 0)};`);
       }
-      utils.writeIfChanged(`${utils.dirs.build}/${project.name}.css`, projectCssString);
-    };
-
-    copySrc();
-    copyEnv();
-    buildJS();
-    buildSCSS();
-    buildHTML();
-
-    return project.name;
+    });
   };
 
-  buildModule(process.cwd());
+  copySrc();
+  copyEnv();
+  buildJS();
+  buildHTML();
+
+  return project.name;
+};
 
-})();
+buildModule(process.cwd());

package/commands/clean.js

@@ -1,7 +1,5 @@
 import fs from 'fs';
 import * as utils from './utils.js';
 
-(async () => {
-  fs.rmSync(utils.dirs.build + '/', { recursive: true, force: true });
-  fs.rmSync(utils.dirs.dist + '/', { recursive: true, force: true });
-})();
+fs.rmSync(utils.dirs.build + '/', { recursive: true, force: true });
+fs.rmSync(utils.dirs.dist + '/', { recursive: true, force: true });

package/commands/dist.js

@@ -5,7 +5,6 @@ import * as utils from './utils.js';
 import fs from 'fs';
 import fse from 'fs-extra';
 import { minify } from 'html-minifier';
-import CleanCSS from 'clean-css';
 
 import esbuild from 'esbuild';
 
@@ -17,51 +16,58 @@ if (args.length >= 3) {
 
 const verbose = process.env.verbose || false;
 
-(async () => {
-  const project = require(`${process.cwd()}/${utils.dirs.src}/leanweb.json`);
+const project = require(`${process.cwd()}/${utils.dirs.src}/leanweb.json`);
 
-  await utils.exec(`npx leanweb clean`);
-  await utils.exec(`npx leanweb build ${env}`);
+utils.exec(`npx leanweb clean`);
+utils.exec(`npx leanweb build ${env}`);
 
-  fs.mkdirSync(utils.dirs.dist, { recursive: true });
-  const result = await esbuild.build({
-    entryPoints: [`./${utils.dirs.build}/${project.name}.js`],
-    bundle: true,
-    minify: true,
-    sourcemap: true,
-    format: 'esm',
-    outfile: `./${utils.dirs.dist}/${project.name}.js`,
-    metafile: !!verbose,
-  });
-  if (verbose) {
-    const text = await esbuild.analyzeMetafile(result.metafile);
-    console.log(text);
-  }
+fs.mkdirSync(utils.dirs.dist, { recursive: true });
+const result = await esbuild.build({
+  entryPoints: [`./${utils.dirs.build}/${project.name}.js`],
+  bundle: true,
+  minify: true,
+  sourcemap: true,
+  format: 'esm',
+  outfile: `./${utils.dirs.dist}/${project.name}.js`,
+  metafile: !!verbose,
+});
+if (verbose) {
+  const text = await esbuild.analyzeMetafile(result.metafile);
+  console.log(text);
+}
 
-  const indexHTML = fs.readFileSync(`./${utils.dirs.build}/index.html`, 'utf8');
-  const minifiedIndexHtml = minify(indexHTML, {
+const minimizePage = page => {
+  const html = fs.readFileSync(`./${utils.dirs.build}/${page}.html`, 'utf8');
+  const minifiedIndexHtml = minify(html, {
     caseSensitive: true,
     collapseWhitespace: true,
     minifyCSS: true,
     minifyJS: true,
     removeComments: true,
   });
-  fs.writeFileSync(`./${utils.dirs.dist}/index.html`, minifiedIndexHtml);
 
-  const appCSS = fs.readFileSync(`./${utils.dirs.build}/${project.name}.css`, 'utf8');
-  const minifiedAppCss = new CleanCSS({}).minify(appCSS);
-  fs.writeFileSync(`./${utils.dirs.dist}/${project.name}.css`, minifiedAppCss.styles);
+  const pageName = utils.getComponentName(page);
+  const pagePath = `${utils.dirs.dist}/${utils.getComponentPath(page)}`;
+  fs.mkdirSync(pagePath, { recursive: true });
+  fs.writeFileSync(`${pagePath}/${pageName}.html`, minifiedIndexHtml);
+};
 
-  fse.copySync(`./${utils.dirs.build}/favicon.svg`, `./${utils.dirs.dist}/favicon.svg`);
-  project.resources?.forEach(resource => {
-    const source = `./${utils.dirs.build}/${resource}`;
-    if (fs.existsSync(source)) {
-      fse.copySync(source, `./${utils.dirs.dist}/${resource}`, { dereference: true });
-    }
-  });
+project.pages.push('index');
+project.pages.forEach(minimizePage);
+
+const appCSS = fs.readFileSync(`./${utils.dirs.build}/${project.name}.css`, 'utf8');
+fs.writeFileSync(`./${utils.dirs.dist}/${project.name}.css`, appCSS);
 
-  const postDistFile = './post-dist';
-  if (fs.existsSync(postDistFile) && fs.statSync(postDistFile).isFile()) {
-    await utils.exec(postDistFile);
+fse.copySync(`./${utils.dirs.build}/favicon.svg`, `./${utils.dirs.dist}/favicon.svg`);
+fse.copySync(`./${utils.dirs.build}/global-styles.css`, `./${utils.dirs.dist}/global-styles.css`);
+project.resources?.forEach(resource => {
+  const source = `./${utils.dirs.build}/${resource}`;
+  if (fs.existsSync(source)) {
+    fse.copySync(source, `./${utils.dirs.dist}/${resource}`, { dereference: true });
   }
-})();
+});
+
+const postDistFile = './post-dist';
+if (fs.existsSync(postDistFile) && fs.statSync(postDistFile).isFile()) {
+  utils.exec(postDistFile);
+}

package/commands/generate.js

@@ -50,8 +50,8 @@ import * as utils from './utils.js';
       fs.writeFileSync(`${cmpPath}/${cmpName}.html`, `<div>${leanwebJSON.name}-${cmpName} works!</div>`);
     }
 
-    if (!fs.existsSync(`${cmpPath}/${cmpName}.scss`)) {
-      fs.writeFileSync(`${cmpPath}/${cmpName}.scss`, '');
+    if (!fs.existsSync(`${cmpPath}/${cmpName}.css`)) {
+      fs.writeFileSync(`${cmpPath}/${cmpName}.css`, '');
     }
   }
 })();

package/commands/init.js

@@ -23,7 +23,7 @@ import * as utils from './utils.js';
     return;
   }
 
-  let projectName = path.basename(path.resolve());
+  const projectName = path.basename(path.resolve());
 
   if (args.length >= 3) {
     projectName = args[2];
@@ -38,20 +38,20 @@ import * as utils from './utils.js';
     ],
   };
 
-  const projectScss = `// html,
-// body {
-   // height: 100%;
-   // width: 100%;
-   // margin: 0 auto;
-   // padding: 0;
+  const projectCss = `/* html,
+body {
+  height: 100%;
+  width: 100%;
+  margin: 0 auto;
+  padding: 0;
 
-   // font-family: "Roboto", "Helvetica", "Arial", sans-serif;
-// }
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+} */
 `
 
-  const globalScss = `// div {
-//    color: tomato;
-// }
+  const globalCss = `/* div {
+  color: tomato;
+} */
 `;
 
   fs.mkdirSync(`${utils.dirs.src}/resources/`, { recursive: true });
@@ -64,8 +64,8 @@ import * as utils from './utils.js';
   let htmlString = fs.readFileSync(`${__dirname}/../templates/index.html`, 'utf8');
   htmlString = htmlString.replace(/\$\{project\.name\}/g, projectName);
   fs.writeFileSync(`./${utils.dirs.src}/index.html`, htmlString);
-  fs.writeFileSync(`./src/${projectName}.scss`, projectScss);
-  fs.writeFileSync(`./${utils.dirs.src}/global-styles.scss`, globalScss);
+  fs.writeFileSync(`./src/${projectName}.css`, projectCss);
+  fs.writeFileSync(`./${utils.dirs.src}/global-styles.css`, globalCss);
   fse.copySync(`${__dirname}/../templates/favicon.svg`, `./${utils.dirs.src}/favicon.svg`);
   fse.copySync(`${__dirname}/../templates/env.js`, `./${utils.dirs.src}/env.js`);
   fse.copySync(`${__dirname}/../templates/env/`, `./${utils.dirs.src}/env/`);

package/commands/serve.js

@@ -13,28 +13,25 @@ const host = process.env.host || '127.0.0.1';
 let port = process.env.port || 2020;
 const noopen = process.env.noopen || false;
 
-(async () => {
-
-  const build = async (eventType, filename) => {
-    // console.log(eventType + ': ', filename);
-    await utils.exec(`npx leanweb build ${env}`);
-  };
-
-  const throttledBuild = utils.throttle(build);
-  watch(process.cwd() + `/${utils.dirs.src}/`, { recursive: true }, (eventType, filename) => {
-    throttledBuild(eventType, filename);
-  });
-
-  build();
-
-  const params = {
-    port,
-    host,
-    root: utils.dirs.build,
-    open: !noopen,
-    file: 'index.html',
-    wait: 1000,
-    logLevel: 1,
-  };
-  liveServer.start(params);
-})();
+const build = (eventType, filename) => {
+  // console.log(eventType + ': ', filename);
+  utils.exec(`npx leanweb build ${env}`);
+};
+
+const throttledBuild = utils.throttle(build);
+watch(process.cwd() + `/${utils.dirs.src}/`, { recursive: true }, (eventType, filename) => {
+  throttledBuild(eventType, filename);
+});
+
+build();
+
+const params = {
+  port,
+  host,
+  root: utils.dirs.build,
+  open: !noopen,
+  file: 'index.html',
+  wait: 1000,
+  logLevel: 1,
+};
+liveServer.start(params);

package/commands/utils.js

@@ -1,5 +1,4 @@
 import { execSync } from 'child_process';
-import sass from 'sass';
 import path from 'path';
 import net from 'net';
 import fs from 'fs';
@@ -37,15 +36,6 @@ export const writeIfChanged = (file, string) => {
 
 export const exec = command => execSync(command, { encoding: 'utf8', stdio: 'inherit' });
 
-export const buildCSS = (scssString, ...currentPaths) => {
-  if (scssString.trim()) {
-    const loadPaths = [...currentPaths, path.resolve(process.cwd(), dirs.build)];
-    const cssResult = sass.compileString(scssString, { loadPaths });
-    return cssResult.css.toString().trim();
-  }
-  return '';
-};
-
 export const getComponentName = cmp => {
   const indexOfLastSlash = cmp.lastIndexOf('/');
   if (indexOfLastSlash > -1) {
@@ -54,6 +44,14 @@ export const getComponentName = cmp => {
   return cmp;
 };
 
+export const getComponentPath = cmp => {
+  const indexOfLastSlash = cmp.lastIndexOf('/');
+  if (indexOfLastSlash > -1) {
+    return cmp.substring(0, indexOfLastSlash);
+  }
+  return '';
+};
+
 export const getPathLevels = filePath => {
   filePath = path.normalize(filePath);
   const numSlashes = filePath.replace(/[^\/]/g, '').length;
@@ -115,12 +113,12 @@ will be created. demo-root web component contains 3 files:
 
 root.html
 root.js
-root.scss
+root.css
 
-Under src/ directory, global-styles.scss is created for global styling.
+Under src/ directory, global-styles.css is created for global styling.
 `;
 
-const generateNote = `Usage: leanweb generate component-name
+const generateNote = `Usage: leanweb generate component-names
 For example leanweb g login will create demo-login web component in
 src/components directory. The leanweb.json will be updated to look like:
 
@@ -140,12 +138,14 @@ demo-login web component will contain 3 files:
 
 login.html
 login.js
-login.scss
+login.css
 
 Now, the demo-login component can be added in root.html as follows:
 <demo-login></demo-login>
 `;
 
+const addpageNote = `Usage: leanweb addpage page-names`;
+
 const serveNote = `Usage: leabweb [env] serve or lw s [env]
 Running this command will start the dev server and open the app in a new 
 browser window. Any chances to the source code will cause the dev server to
@@ -189,6 +189,7 @@ Print version information for leanweb.`;
 
 export const targets = {
   'init': { file: 'init.js', note: initNote },
+  'addpage': { file: 'addpage.js', note: addpageNote },
   'generate': { file: 'generate.js', note: generateNote },
   'serve': { file: 'serve.js', note: serveNote },
   'build': { file: 'build.js', note: buildNote },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "leanweb",
-  "version": "2.0.4",
+  "version": "3.0.0",
   "description": "Builds framework agnostic web components.",
   "bin": {
     "leanweb": "leanweb.js",
@@ -20,17 +20,15 @@
   "author": "Qian Chen",
   "license": "MIT",
   "dependencies": {
-    "@babel/parser": "^7.20.7",
-    "clean-css": "^5.3.1",
-    "esbuild": "^0.16.12",
-    "fs-extra": "^11.1.0",
-    "globby": "^13.1.3",
+    "@babel/parser": "^7.24.1",
+    "esbuild": "^0.20.2",
+    "fs-extra": "^11.2.0",
+    "globby": "^14.0.1",
     "html-minifier": "^4.0.0",
-    "isomorphic-git": "^1.21.0",
+    "isomorphic-git": "^1.25.6",
     "live-server": "^1.2.2",
-    "node-watch": "^0.7.3",
+    "node-watch": "^0.7.4",
     "parse5": "^7.1.2",
-    "sass": "^1.57.1",
-    "semver": "^7.3.8"
+    "semver": "^7.6.0"
   }
-}
+}

package/templates/lib/api-client.js

@@ -30,7 +30,7 @@ class APIClient {
     if (this.sendToken) {
       const token = localStorage.getItem('access_token');
       if (token) {
-        headers['access_token'] = token;
+        headers['authorization'] = token;
       } else {
         return null;
       }

package/templates/lib/lw-element.js

@@ -271,11 +271,8 @@ export default class LWElement extends HTMLElement {
       let object;
       let propertyExpr;
       if (astModel.type === 'MemberExpression') {
-        propertyExpr = astModel.property.name;
-        if (astModel.computed) {
-          // . false and [] true
-          propertyExpr = parser.evaluate([astModel.property], context, interpolation.loc)[0];
-        }
+        // . false and [] true
+        propertyExpr = astModel.computed ? parser.evaluate([astModel.property], context, interpolation.loc)[0] : astModel.property.name;
         object = parser.evaluate([astModel.object], context, interpolation.loc)[0];
       } else if (astModel.type === 'Identifier') {
         object = this;

package/templates/page.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>${page.name} - ${project.name}</title>
+  <script type="module" src="${pathLevels}${project.name}.js"></script>
+  <link rel="stylesheet" href="${pathLevels}${project.name}.css">
+  <link rel="icon" type="image/svg+xml" href="${pathLevels}favicon.svg">
+</head>
+<body style="opacity: 0;" onload="document.body.style.opacity=1">
+  ${page.name} works!
+</body>
+</html>