leanweb 1.3.5 → 2.0.0

package/leanweb.js

@@ -1,64 +1,63 @@
 #!/usr/bin/env node
 
-import fs from 'fs';
-import semver from 'semver';
-import * as utils from './commands/utils.js';
-
-import { createRequire } from "module";
-const require = createRequire(import.meta.url);
-
 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);
 
-(async () => {
-
-   const args = process.argv;
-
-   if (args.length < 3) {
-      utils.exec('npx leanweb help');
-      return;
-   }
-
-   let target = args[2];
-
-   const targetCandidates = Object.keys(utils.targets).filter(t => t.startsWith(target));
-   if (targetCandidates.length === 0) {
-      console.error(`Error: target ${target} not found.`);
-      return;
-   } else if (targetCandidates.length > 1) {
-      targetCandidates.forEach(t => {
-         console.log(t);
-      });
-      return;
-   }
-
-   target = targetCandidates[0];
-
-   const leanwebJSONExisted = fs.existsSync(`${process.cwd()}/${utils.dirs.src}/leanweb.json`);
+import fs from 'fs';
+import semver from 'semver';
+import * as utils from './commands/utils.js';
 
-   if (!leanwebJSONExisted && target !== 'init' && target !== 'help' && target !== 'version') {
-      console.error('Error: leanweb.json not found.');
-      return;
-   }
+(async () => {
 
-   if (leanwebJSONExisted && target === 'version' || target === 'serve' || target === 'dist' || target === 'electron') {
-      const leanwebPackageJSON = require(`${__dirname}/package.json`);
-      const projectLeanwebJSON = require(`${process.cwd()}/${utils.dirs.src}/leanweb.json`);
-      const upgradeAvailable = semver.gt(leanwebPackageJSON.version, projectLeanwebJSON.version);
-      if (upgradeAvailable) {
-         console.log(`New version of leanweb lib (${projectLeanwebJSON.version} => ${leanwebPackageJSON.version}) is available. Please consider 
+  const args = process.argv;
+
+  if (args.length < 3) {
+    utils.exec('npx leanweb help');
+    return;
+  }
+
+  let target = args[2];
+
+  const targetCandidates = Object.keys(utils.targets).filter(t => t.startsWith(target));
+  if (targetCandidates.length === 0) {
+    console.error(`Error: target ${target} not found.`);
+    return;
+  } else if (targetCandidates.length > 1) {
+    targetCandidates.forEach(t => {
+      console.log(t);
+    });
+    return;
+  }
+
+  target = targetCandidates[0];
+
+  const leanwebJSONExisted = fs.existsSync(`${process.cwd()}/${utils.dirs.src}/leanweb.json`);
+
+  if (!leanwebJSONExisted && target !== 'init' && target !== 'help' && target !== 'version') {
+    console.error('Error: leanweb.json not found.');
+    return;
+  }
+
+  if (leanwebJSONExisted && target === 'version' || target === 'serve' || target === 'dist') {
+    const leanwebPackageJSON = require(`${__dirname}/package.json`);
+    const projectLeanwebJSON = require(`${process.cwd()}/${utils.dirs.src}/leanweb.json`);
+    const upgradeAvailable = semver.gt(leanwebPackageJSON.version, projectLeanwebJSON.version);
+    if (upgradeAvailable) {
+      console.log(`New version of leanweb lib (${projectLeanwebJSON.version} => ${leanwebPackageJSON.version}) is available. Please consider 
 running 'lw upgrade' to upgrade your project leanweb lib.`);
-      }
+    }
 
-      const projectTooNew = semver.gt(projectLeanwebJSON.version, leanwebPackageJSON.version);
-      if (projectTooNew) {
-         console.log(`Poject version of leanweb (${projectLeanwebJSON.version} > ${leanwebPackageJSON.version}) is newer than local leanweb tools version.
+    const projectTooNew = semver.gt(projectLeanwebJSON.version, leanwebPackageJSON.version);
+    if (projectTooNew) {
+      console.log(`Poject version of leanweb (${projectLeanwebJSON.version} > ${leanwebPackageJSON.version}) is newer than local leanweb tools version.
 Please consider running 'npm i leanweb -g' to upgrade your local leanweb tools.`);
-      }
-   }
-   const targetData = utils.targets[target];
-   const command = `node --trace-deprecation ${__dirname}/commands/${targetData.file} ${args.slice(3).join(' ')}`;
-   utils.exec(command);
+    }
+  }
+  const targetData = utils.targets[target];
+  const command = `node --trace-deprecation ${__dirname}/commands/${targetData.file} ${args.slice(3).join(' ')}`;
+  utils.exec(command);
 })();

package/lib/lw-html-parser.js

@@ -4,100 +4,100 @@ import * as parser from '@babel/parser';
 let astKey = 0;
 
 const removeASTLocation = ast => {
-   if (Array.isArray(ast)) {
-      ast.forEach(a => removeASTLocation(a));
-   } else if (typeof ast === 'object') {
-      delete ast['loc'];
-      delete ast['start'];
-      delete ast['end'];
-      const values = Object.values(ast).filter(v => Array.isArray(v) || typeof v === 'object');
-      removeASTLocation(values);
-   }
+  if (Array.isArray(ast)) {
+    ast.forEach(a => removeASTLocation(a));
+  } else if (typeof ast === 'object') {
+    delete ast['loc'];
+    delete ast['start'];
+    delete ast['end'];
+    const values = Object.values(ast).filter(v => Array.isArray(v) || typeof v === 'object');
+    removeASTLocation(values);
+  }
 };
 
 const getAST = expr => {
-   const parsedProgram = parser.parse(expr).program;
-   if (parsedProgram.directives.length > 0 && parsedProgram.body.length === 0) {
-      return parsedProgram.directives;
-   }
-   return parsedProgram.body;
+  const parsedProgram = parser.parse(expr).program;
+  if (parsedProgram.directives.length > 0 && parsedProgram.body.length === 0) {
+    return parsedProgram.directives;
+  }
+  return parsedProgram.body;
 };
 
 const walkNode = (node, interpolation) => {
-   node.attrs && node.attrs.forEach(attr => {
-      const { startLine, endLine } = node.sourceCodeLocation;
-      const loc = { startLine, endLine };
-      const key = `${++astKey}`;
-      if (attr.name === 'lw-false' || attr.name === 'lw-context' || attr.name === 'lw-for-parent') {
-         // this should never happen
-         console.assert(false, attr.name);
-         // no op
-      } else if (attr.name === 'lw') {
-         node.attrs.push({ name: 'lw-elem', value: '' });
-         let expr = '';
-         if (node.childNodes) {
-            const exprNode = node.childNodes.find(childNode => childNode.nodeName === '#text');
-            expr = exprNode ? exprNode.value : '';
-         }
-         const ast = getAST(expr);
-         removeASTLocation(ast);
-         interpolation[key] = { ast, loc };
-         node.childNodes.length = 0;
-         attr.value = key;
-      } else if (attr.name === ('lw-for')) {
-         node.attrs.push({ name: 'lw-elem', value: '' });
-         const matched = attr.value.match(/(.+)\s+in\s+(.+)/);
-         const itemIndex = matched[1].split(',');
-         const itemExpr = itemIndex[0].trim();
-         let indexExpr;
-         if (itemIndex.length > 1) {
-            indexExpr = itemIndex[1].trim();
-         }
-         const itemsExpr = matched[2];
-         const astItems = getAST(itemsExpr);
-         removeASTLocation(astItems);
-         interpolation[key] = { astItems, loc, itemExpr, indexExpr, itemsExpr };
-         attr.value = key;
-      } else if (attr.name === ('lw-model')) {
-         node.attrs.push({ name: 'lw-elem-bind', value: '' });
-         node.attrs.push({ name: 'lw-elem', value: '' });
-         const ast = getAST(attr.value);
-         removeASTLocation(ast);
-         interpolation[key] = { ast, loc };
-         attr.value = key;
-      } else if (attr.name.startsWith('lw-on:') || attr.name.startsWith('lw-class:') || attr.name.startsWith('lw-bind:') || attr.name.startsWith('lw-input:')) {
-         if (attr.name.startsWith('lw-on:') || attr.name.startsWith('lw-input:')) {
-            node.attrs.push({ name: 'lw-elem-bind', value: '' });
-         }
+  node.attrs && node.attrs.forEach(attr => {
+    const { startLine, endLine } = node.sourceCodeLocation;
+    const loc = { startLine, endLine };
+    const key = `${++astKey}`;
+    if (attr.name === 'lw-false' || attr.name === 'lw-context' || attr.name === 'lw-for-parent') {
+      // this should never happen
+      console.assert(false, attr.name);
+      // no op
+    } else if (attr.name === 'lw') {
+      node.attrs.push({ name: 'lw-elem', value: '' });
+      let expr = '';
+      if (node.childNodes) {
+        const exprNode = node.childNodes.find(childNode => childNode.nodeName === '#text');
+        expr = exprNode ? exprNode.value : '';
+      }
+      const ast = getAST(expr);
+      removeASTLocation(ast);
+      interpolation[key] = { ast, loc };
+      node.childNodes.length = 0;
+      attr.value = key;
+    } else if (attr.name === ('lw-for')) {
+      node.attrs.push({ name: 'lw-elem', value: '' });
+      const matched = attr.value.match(/(.+)\s+in\s+(.+)/);
+      const itemIndex = matched[1].split(',');
+      const itemExpr = itemIndex[0].trim();
+      let indexExpr;
+      if (itemIndex.length > 1) {
+        indexExpr = itemIndex[1].trim();
+      }
+      const itemsExpr = matched[2];
+      const astItems = getAST(itemsExpr);
+      removeASTLocation(astItems);
+      interpolation[key] = { astItems, loc, itemExpr, indexExpr, itemsExpr };
+      attr.value = key;
+    } else if (attr.name === ('lw-model')) {
+      node.attrs.push({ name: 'lw-elem-bind', value: '' });
+      node.attrs.push({ name: 'lw-elem', value: '' });
+      const ast = getAST(attr.value);
+      removeASTLocation(ast);
+      interpolation[key] = { ast, loc };
+      attr.value = key;
+    } else if (attr.name.startsWith('lw-on:') || attr.name.startsWith('lw-class:') || attr.name.startsWith('lw-bind:') || attr.name.startsWith('lw-input:')) {
+      if (attr.name.startsWith('lw-on:') || attr.name.startsWith('lw-input:')) {
+        node.attrs.push({ name: 'lw-elem-bind', value: '' });
+      }
 
-         node.attrs.push({ name: 'lw-elem', value: '' });
-         const lw = attr.name.split(':');
-         const lwType = lw[0];
-         const lwValue = lw[1];
+      node.attrs.push({ name: 'lw-elem', value: '' });
+      const lw = attr.name.split(':');
+      const lwType = lw[0];
+      const lwValue = lw[1];
 
-         const ast = getAST(attr.value);
-         removeASTLocation(ast);
-         interpolation[key] = { ast, loc, lwType, lwValue };
+      const ast = getAST(attr.value);
+      removeASTLocation(ast);
+      interpolation[key] = { ast, loc, lwType, lwValue };
 
-         attr.value = key;
-      } else if (attr.name.startsWith('lw-')) {
-         node.attrs.push({ name: 'lw-elem', value: '' });
-         const ast = getAST(attr.value);
-         removeASTLocation(ast);
-         interpolation[key] = { ast, loc };
-         attr.value = key;
-      }
-   });
-   node.childNodes && node.childNodes.forEach(childNode => walkNode(childNode, interpolation));
+      attr.value = key;
+    } else if (attr.name.startsWith('lw-')) {
+      node.attrs.push({ name: 'lw-elem', value: '' });
+      const ast = getAST(attr.value);
+      removeASTLocation(ast);
+      interpolation[key] = { ast, loc };
+      attr.value = key;
+    }
+  });
+  node.childNodes && node.childNodes.forEach(childNode => walkNode(childNode, interpolation));
 };
 
 export const parse = html => {
-   const ast = {};
-   const doc = parse5.parseFragment(html, { sourceCodeLocationInfo: true });
-   walkNode(doc, ast);
-   html = parse5.serialize(doc);
-   ast.html = html;
-   return ast;
+  const ast = {};
+  const doc = parse5.parseFragment(html, { sourceCodeLocationInfo: true });
+  walkNode(doc, ast);
+  html = parse5.serialize(doc);
+  ast.html = html;
+  return ast;
 };
 
 

package/package.json

@@ -1,44 +1,36 @@
 {
-   "name": "leanweb",
-   "version": "1.3.5",
-   "description": "Builds framework agnostic web components.",
-   "bin": {
-      "leanweb": "leanweb.js",
-      "lw": "leanweb.js"
-   },
-   "type": "module",
-   "repository": {
-      "type": "git",
-      "url": "git+https://github.com/elgs/leanweb.git"
-   },
-   "homepage": "https://leanweb.app",
-   "keywords": [
-      "leanweb",
-      "lw",
-      "web components"
-   ],
-   "author": "Qian Chen",
-   "license": "MIT",
-   "dependencies": {
-      "@babel/core": "^7.18.10",
-      "@babel/parser": "^7.18.11",
-      "@babel/plugin-transform-runtime": "^7.18.10",
-      "@babel/preset-env": "^7.18.10",
-      "babel-loader": "^8.2.5",
-      "clean-css": "^5.3.1",
-      "css-loader": "^6.7.1",
-      "fs-extra": "^10.1.0",
-      "globby": "^13.1.2",
-      "html-minifier": "^4.0.0",
-      "isomorphic-git": "^1.19.2",
-      "json5-loader": "^4.0.1",
-      "node-watch": "^0.7.3",
-      "parse5": "^7.0.0",
-      "raw-loader": "^4.0.2",
-      "sass": "^1.54.5",
-      "sass-loader": "^13.0.2",
-      "semver": "^7.3.7",
-      "webpack": "^5.74.0",
-      "webpack-dev-server": "^4.10.0"
-   }
-}
+  "name": "leanweb",
+  "version": "2.0.0",
+  "description": "Builds framework agnostic web components.",
+  "bin": {
+    "leanweb": "leanweb.js",
+    "lw": "leanweb.js"
+  },
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/elgs/leanweb.git"
+  },
+  "homepage": "https://leanweb.app",
+  "keywords": [
+    "leanweb",
+    "lw",
+    "web components"
+  ],
+  "author": "Qian Chen",
+  "license": "MIT",
+  "dependencies": {
+    "@babel/parser": "^7.20.5",
+    "clean-css": "^5.3.1",
+    "esbuild": "^0.15.16",
+    "fs-extra": "^11.1.0",
+    "globby": "^13.1.2",
+    "html-minifier": "^4.0.0",
+    "isomorphic-git": "^1.21.0",
+    "live-server": "^1.2.2",
+    "node-watch": "^0.7.3",
+    "parse5": "^7.1.2",
+    "sass": "^1.56.1",
+    "semver": "^7.3.8"
+  }
+}

package/templates/component.js

@@ -2,47 +2,47 @@ import LWElement from './../../${pathLevels}lib/lw-element.js';
 import ast from './ast.js';
 
 customElements.define('${projectName}-${component}',
-   class extends LWElement {  // LWElement extends HTMLElement
-      constructor() {
-         super(ast);
-      }
-
-      // derived from LWElement
-      // domReady() {
-      //    console.log('Dom is ready');
-      // }
-
-      // inputReady() {
-      //    console.log('input is ready');
-      // }
-
-      // Called when the urlHash changes. This could be useful to update the 
-      // DOM on component routing.
-      // urlHashChanged() {
-      //    // update component DOM
-      //    this.update();
-      // }
-
-      // derived from HTMLElement
-      // connectedCallback() {
-      //    console.log(this.isConnected);
-      //    console.log('Element added to page.');
-      // }
-
-      // disconnectedCallback() {
-      //    console.log('Element removed from page.');
-      // }
-
-      // adoptedCallback() {
-      //    console.log('Element moved to new page.');
-      // }
-
-      // static get observedAttributes() {
-      //    return [];
-      // }
-
-      // attributeChangedCallback(name, oldValue, newValue) {
-      //    console.log(name, oldValue, newValue);
-      // }
-   }
+  class extends LWElement {  // LWElement extends HTMLElement
+    constructor() {
+      super(ast);
+    }
+
+    // derived from LWElement
+    // domReady() {
+    //    console.log('Dom is ready');
+    // }
+
+    // inputReady() {
+    //    console.log('input is ready');
+    // }
+
+    // Called when the urlHash changes. This could be useful to update the 
+    // DOM on component routing.
+    // urlHashChanged() {
+    //    // update component DOM
+    //    this.update();
+    // }
+
+    // derived from HTMLElement
+    // connectedCallback() {
+    //    console.log(this.isConnected);
+    //    console.log('Element added to page.');
+    // }
+
+    // disconnectedCallback() {
+    //    console.log('Element removed from page.');
+    // }
+
+    // adoptedCallback() {
+    //    console.log('Element moved to new page.');
+    // }
+
+    // static get observedAttributes() {
+    //    return [];
+    // }
+
+    // attributeChangedCallback(name, oldValue, newValue) {
+    //    console.log(name, oldValue, newValue);
+    // }
+  }
 );

package/templates/env/prod.js

@@ -1,3 +1,3 @@
 export default {
-   // apiUrl: 'https://prod.com'
+  // apiUrl: 'https://prod.com'
 };

package/templates/env/test.js

@@ -1,3 +1,3 @@
 export default {
-   // apiUrl: 'http://test:1234'
+  // apiUrl: 'http://test:1234'
 };

package/templates/env.js

@@ -1,3 +1,3 @@
 export default {
-   // apiUrl: 'http://localhost:1234'
+  // apiUrl: 'http://localhost:1234'
 };

package/templates/index.html

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

package/templates/lib/api-client.js

@@ -3,65 +3,65 @@
 // to overwrite on Leanweb upgrade.
 
 class APIClient {
-   constructor(baesUrl, sendToken = false, defaultHeaders = {}) {
-      this.baesUrl = baesUrl;
-      this.sendToken = sendToken;
-      this.defaultHeaders = defaultHeaders;
-   }
+  constructor(baesUrl, sendToken = false, defaultHeaders = {}) {
+    this.baesUrl = baesUrl;
+    this.sendToken = sendToken;
+    this.defaultHeaders = defaultHeaders;
+  }
 
-   async _fetch(method, url = '', data = {}, headers = {}) {
-      if (!url.toLowerCase().startsWith('https://') && !url.toLowerCase().startsWith('http://')) {
-         url = this.baesUrl + url;
-      }
+  async _fetch(method, url = '', data = {}, headers = {}) {
+    if (!url.toLowerCase().startsWith('https://') && !url.toLowerCase().startsWith('http://')) {
+      url = this.baesUrl + url;
+    }
 
-      if (method === 'GET' && data && typeof data === 'object') {
-         // encode data and append to url
-         const queryString = paramsToQueryString(data);
-         data = null;
-         if (url.endsWith('?')) {
-            url += queryString;
-         } else if (url.indexOf('?') >= 0) {
-            url += ('&' + queryString);
-         } else {
-            url += ('?' + queryString);
-         }
+    if (method === 'GET' && data && typeof data === 'object') {
+      // encode data and append to url
+      const queryString = paramsToQueryString(data);
+      data = null;
+      if (url.endsWith('?')) {
+        url += queryString;
+      } else if (url.indexOf('?') >= 0) {
+        url += ('&' + queryString);
+      } else {
+        url += ('?' + queryString);
       }
+    }
 
-      if (this.sendToken) {
-         const token = localStorage.getItem('access_token');
-         if (token) {
-            headers['access_token'] = token;
-         } else {
-            return null;
-         }
+    if (this.sendToken) {
+      const token = localStorage.getItem('access_token');
+      if (token) {
+        headers['access_token'] = token;
+      } else {
+        return null;
       }
-      const response = await fetch(url, {
-         method,
-         headers: { ...this.defaultHeaders, ...headers },
-         body: data ? JSON.stringify(data) : null,
-      });
-      return response.json();
-   }
+    }
+    const response = await fetch(url, {
+      method,
+      headers: { ...this.defaultHeaders, ...headers },
+      body: data ? JSON.stringify(data) : null,
+    });
+    return response.json();
+  }
 
-   post(url, data, headers) { return this._fetch('POST', url, data, headers); }
-   get(url, data, headers) { return this._fetch('GET', url, data, headers); }
-   patch(url, data, headers) { return this._fetch('PATCH', url, data, headers); }
-   delete(url, data, headers) { return this._fetch('DELETE', url, data, headers); }
-   put(url, data, headers) { return this._fetch('PUT', url, data, headers); }
-   options(url, data, headers) { return this._fetch('OPTIONS', url, data, headers); }
+  post(url, data, headers) { return this._fetch('POST', url, data, headers); }
+  get(url, data, headers) { return this._fetch('GET', url, data, headers); }
+  patch(url, data, headers) { return this._fetch('PATCH', url, data, headers); }
+  delete(url, data, headers) { return this._fetch('DELETE', url, data, headers); }
+  put(url, data, headers) { return this._fetch('PUT', url, data, headers); }
+  options(url, data, headers) { return this._fetch('OPTIONS', url, data, headers); }
 }
 
 const paramsToQueryString = (params) => {
-   return Object.keys(params).map(k => {
-      const v = params[k];
-      if (Array.isArray(v)) {
-         return v.reduce((vacc, vcurr) => {
-            return `${vacc}${k}=${encodeURIComponent(vcurr)}&`;
-         }, '');
-      } else {
-         return `${k}=${encodeURIComponent(v)}&`;
-      }
-   }).reduce((acc, curr) => acc + curr, '').slice(0, -1);
+  return Object.keys(params).map(k => {
+    const v = params[k];
+    if (Array.isArray(v)) {
+      return v.reduce((vacc, vcurr) => {
+        return `${vacc}${k}=${encodeURIComponent(vcurr)}&`;
+      }, '');
+    } else {
+      return `${k}=${encodeURIComponent(v)}&`;
+    }
+  }).reduce((acc, curr) => acc + curr, '').slice(0, -1);
 };
 
 // const apiUrl = 'http://localhost:1234';