leanweb 1.0.4

package/commands/utils.js

@@ -0,0 +1,237 @@
+const { execSync } = require('child_process');
+const sass = require('sass');
+const path = require('path');
+const net = require('net');
+
+const dirs = {
+   src: 'src',
+   build: 'build',
+   serve: 'serve',
+   dist: 'dist',
+   electron: 'electron',
+};
+
+module.exports.exec = command => execSync(command, { encoding: 'utf8', stdio: 'inherit' });
+
+module.exports.buildCSS = (scssString, currentPaths) => {
+   if (scssString.trim()) {
+      const includePaths = [currentPaths, path.resolve(process.cwd(), dirs.build), path.resolve(process.cwd(), 'node_modules')];
+      const cssResult = sass.renderSync({ data: scssString, includePaths });
+      return cssResult.css.toString().trim();
+   }
+   return '';
+};
+
+module.exports.getComponentName = cmp => {
+   const indexOfLastSlash = cmp.lastIndexOf('/');
+   if (indexOfLastSlash > -1) {
+      return cmp.substring(indexOfLastSlash + 1);
+   }
+   return cmp;
+};
+
+module.exports.getPathLevels = filePath => {
+   filePath = path.normalize(filePath);
+   const numSlashes = filePath.replace(/[^\/]/g, '').length;
+   let ret = '';
+   for (let i = 0; i < numSlashes; ++i) {
+      ret += '../';
+   }
+   return ret;
+};
+
+module.exports.throttle = (callback, limit = 100) => {
+   let wait = false;
+   return function () {
+      if (!wait) {
+         wait = true;
+         setTimeout(() => {
+            wait = false;
+            callback.apply(null, arguments);
+         }, limit);
+      }
+   };
+};
+
+module.exports.getWebPackConfig = (outputDir, project) => {
+   return {
+      entry: process.cwd() + `/${dirs.build}/${project.name}.js`,
+      output: {
+         path: process.cwd() + `/${outputDir}/`,
+         filename: `${project.name}.js`,
+      },
+      module: {
+         rules: [{
+            test: path.resolve(process.cwd()),
+            exclude: /node_modules/,
+            loader: require.resolve('babel-loader'),
+            options: {
+               presets: [require.resolve('@babel/preset-env'), {
+                  plugins: [
+                     '@babel/plugin-transform-runtime'
+                  ].map(require.resolve)
+               }]
+            },
+         }, {
+            test: /\.(scss|sass)$/i,
+            use: [
+               {
+                  loader: require.resolve('css-loader'),
+               },
+               {
+                  loader: require.resolve('sass-loader'),
+                  options: {
+                     sassOptions: {
+                        includePaths: [path.resolve(process.cwd(), 'node_modules')],
+                     }
+                  }
+               },
+            ],
+         }, {
+            test: /\.json$/i,
+            loader: require.resolve('json5-loader'),
+            options: {
+               esModule: true,
+            },
+            type: 'javascript/auto',
+         }, {
+            loader: require.resolve('raw-loader'),
+            exclude: [
+               /\.(js|mjs|jsx|ts|tsx)$/i,
+               /\.(json|json5)$/i,
+               /\.(css|scss|sass)$/i
+            ],
+         }]
+      },
+   }
+};
+
+module.exports.portInUse = (port, address = '127.0.0.1') => {
+   return new Promise((resolve, reject) => {
+      const server = net.createServer(socket => socket.pipe(socket));
+
+      server.listen(port, address);
+      server.on('error', e => {
+         resolve(true);
+      });
+      server.on('listening', e => {
+         server.close();
+         resolve(false);
+      });
+   });
+};
+
+module.exports.dirs = dirs;
+
+const initNote = `Usage: leanweb init or leanweb init project-name
+leanweb init will initialize a leanweb project with the name of the current
+working directory, otherwise, if a project-name is provided, the provided
+project-name will be used as the leanweb project name.
+
+leanweb init command will create src/leanweb.json file, which looks like:
+{
+  "name": "demo",
+  "version": "0.4.5",
+  "components": [
+    "demo-root",
+  ],
+  "resources": [
+   "resources/"
+  ]
+}
+where demo is the project name.
+
+A src/ directory will be created, and the top level web component demo-root
+will be created. demo-root web component contains 3 files:
+
+root.html
+root.js
+root.scss
+
+Under src/ directory, global-styles.scss is created for global styling.
+`;
+
+const generateNote = `Usage: leanweb generate component-name
+For example leanweb g login will create demo-login web component in
+src/components directory. The leanweb.json will be updated to look like:
+
+{
+  "name": "demo",
+  "version": "0.4.5",
+  "components": [
+    "root",
+    "login"
+  ],
+  "resources": [
+   "resources/"
+  ]
+}
+
+demo-login web component will contain 3 files:
+
+login.html
+login.js
+login.scss
+
+Now, the demo-login component can be added in root.html as follows:
+<demo-login></demo-login>
+`;
+
+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
+reload the app and the browser will be automatically refreshed.
+`;
+
+const buildNote = `Usage: leanweb build [env]
+This will build the app and the output files will be stored in the build/
+directory. In this phase, the build doesn't transpile the app code. So likely
+the build file will only work with latest Chrome. However, the dist will 
+produce output for most desktop and mobile browsers.
+`;
+
+const distNote = `Usage: leanweb dist [env]
+This will transpile the source code and produce output compatible with most
+desktop and mobile browsers. The output will be stored in dist/ directory.
+`;
+
+const cleanNote = `Usage: leanweb clean
+This will remove the build and dist directory.
+`;
+
+const upgradeNote = `Usage: leanweb upgrade
+This will upgrade leanweb runtime in the src/lib directory.
+`;
+
+const electronNote = `Usage: leanweb electron [env]
+This will run the app as native desktop app using Electron.
+`;
+
+const destroyNote = `Usage leanweb destroy project-name
+This will remove the src/, build/ and dist/ directory. Please
+note the src directory will be deleted by this command.
+`
+
+const helpNote = `Usage: leanweb help target-name
+This will show help information of each target. All target names could be
+abbreviated as long as there is no ambiguity. For example:
+leanweb help build is the same as leanweb h b
+leanweb generate login is the same as leanweb g login
+`;
+
+const versionNote = `Usage: leanweb version
+Print version information for leanweb.`;
+
+module.exports.targets = {
+   'init': { file: 'init.js', note: initNote },
+   'generate': { file: 'generate.js', note: generateNote },
+   'serve': { file: 'serve.js', note: serveNote },
+   'build': { file: 'build.js', note: buildNote },
+   'dist': { file: 'dist.js', note: distNote },
+   'upgrade': { file: 'upgrade.js', note: upgradeNote },
+   'clean': { file: 'clean.js', note: cleanNote },
+   'electron': { file: 'electron.js', note: electronNote },
+   'destroy': { file: 'destroy.js', note: destroyNote },
+   'help': { file: 'help.js', note: helpNote },
+   'version': { file: 'version.js', note: versionNote },
+};

package/commands/version.js

@@ -0,0 +1,2 @@
+const packageJSON = require('../package.json');
+console.log(packageJSON.name, packageJSON.version);

package/leanweb.js

@@ -0,0 +1,56 @@
+#!/usr/bin/env node
+
+(async () => {
+
+   const fs = require('fs');
+   const semver = require('semver');
+   const utils = require('./commands/utils.js');
+
+   const args = process.argv;
+
+   if (args.length < 3) {
+      utils.exec('npx lw 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' || 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 
+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.
+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);
+})();

package/lib/lw-html-parser.js

@@ -0,0 +1,113 @@
+const parse5 = require('parse5');
+const parser = require('@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);
+   }
+};
+
+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 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.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 };
+
+         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));
+};
+
+const parse = html => {
+   const ast = {};
+   const doc = parse5.parseFragment(html, { sourceCodeLocationInfo: true });
+   walkNode(doc, ast);
+   html = parse5.serialize(doc);
+   ast.html = html;
+   return ast;
+};
+
+module.exports = { parse };
+
+
+// const html = `<div>
+// <span class="x" lw>/a/;(1+(2+3))</span>
+// <span lw-on:click="a">dddd</span>
+// <span lw></span>
+// </div>`;
+
+// const result = parse(html);
+// console.log(JSON.stringify(result, null, 2));

package/package.json

@@ -0,0 +1,43 @@
+{
+   "name": "leanweb",
+   "version": "1.0.4",
+   "description": "Builds framework agnostic web components.",
+   "bin": {
+      "leanweb": "leanweb.js",
+      "lw": "leanweb.js"
+   },
+   "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.15.5",
+      "@babel/parser": "^7.15.6",
+      "@babel/plugin-transform-runtime": "^7.15.0",
+      "@babel/preset-env": "^7.15.6",
+      "babel-loader": "^8.2.2",
+      "clean-css": "^5.1.5",
+      "css-loader": "^6.2.0",
+      "fs-extra": "^10.0.0",
+      "globby": "^11.0.4",
+      "html-minifier": "^4.0.0",
+      "isomorphic-git": "^1.10.0",
+      "json5-loader": "^4.0.1",
+      "node-watch": "^0.7.1",
+      "parse5": "^6.0.1",
+      "raw-loader": "^4.0.2",
+      "sass": "^1.41.1",
+      "sass-loader": "^12.1.0",
+      "semver": "^7.3.5",
+      "webpack": "^5.53.0",
+      "webpack-dev-server": "^4.2.1"
+   }
+}

package/templates/component.js

@@ -0,0 +1,48 @@
+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);
+      // }
+   }
+);

package/templates/electron.js

@@ -0,0 +1,43 @@
+const { app, BrowserWindow } = require('electron');
+
+const createWindow = () => {
+   // Create the browser window.
+   const win = new BrowserWindow({
+      width: 640,
+      height: 480,
+      webPreferences: {
+         nodeIntegration: true
+      }
+   });
+
+   // and load the index.html of the app.
+   win.loadFile('index.html');
+
+   // Open the DevTools.
+   // win.webContents.openDevTools();
+};
+
+// This method will be called when Electron has finished
+// initialization and is ready to create browser windows.
+// Some APIs can only be used after this event occurs.
+app.whenReady().then(createWindow);
+
+// Quit when all windows are closed.
+app.on('window-all-closed', () => {
+   // On macOS it is common for applications and their menu bar
+   // to stay active until the user quits explicitly with Cmd + Q
+   if (process.platform !== 'darwin') {
+      app.quit();
+   }
+});
+
+app.on('activate', () => {
+   // On macOS it's common to re-create a window in the app when the
+   // dock icon is clicked and there are no other windows open.
+   if (BrowserWindow.getAllWindows().length === 0) {
+      createWindow();
+   }
+});
+
+// In this file you can include the rest of your app's specific main process
+// code. You can also put them in separate files and require them here.

package/templates/env/prod.js

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

package/templates/env/test.js

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

package/templates/env.js

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

package/templates/favicon.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="400px" height="247px" viewBox="0 0 400 247" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="Rectangle" fill="#FF6347" x="0" y="0" width="400" height="247"></rect>
+        <path d="M164.382947,200 L164.382947,182.969188 L94.5504862,182.969188 L94.5504862,48 L77,48 L77,200 L164.382947,200 Z M209.459985,200 L239.942408,72.2689076 L240.311892,72.2689076 L270.424832,200 L288.714286,200 L324,48 L306.449514,48 L279.66193,174.453782 L279.292446,174.453782 L250.103216,48 L231.074794,48 L201.516081,174.453782 L201.146597,174.453782 L175.282723,48 L157.362752,48 L191.170531,200 L209.459985,200 Z" id="LW" fill="#FFFFFF" fill-rule="nonzero"></path>
+    </g>
+</svg>

package/templates/index.html

@@ -0,0 +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">
+</head>
+<body style="opacity: 0;" onload="document.body.style.opacity=1">
+   <${project.name}-root></${project.name}-root>
+</body>
+</html>

package/templates/lib/api-client.js

@@ -0,0 +1,74 @@
+// Please don't modify this file. Create one outside of the lib directory with
+// your project speicific configurations. Files in the lib directory is subject
+// to overwrite on Leanweb upgrade.
+
+class APIClient {
+   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;
+      }
+
+      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;
+         }
+      }
+      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); }
+}
+
+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);
+};
+
+// const apiUrl = 'http://localhost:1234';
+// const anotherApiUrl = 'http://127.0.0.1:4321';
+
+// export const api = new APIClient(apiUrl, true);
+// export const http = new APIClient(apiUrl);
+
+// export const anotherApi = new APIClient(anotherApiUrl, true);
+// export const anotherHttp = new APIClient(anotherApiUrl);