leanweb 1.0.9 → 1.1.3

package/README.md

@@ -259,6 +259,7 @@ items = ["one", "two", "three"];
 <br />
 <button lw-on:click="resetName()">Reset Name</button>
 ```
+
 You could bind multiple events like `lw-on:click,change=handler($event, $node)`.
 
 ```javascript
@@ -318,24 +319,26 @@ imageWidth = 400;
 `demo-parent.html`
 
 ```html
-<demo-child lw-input:userData="user"></demo-child>
+<demo-child lw-input:parent="self" lw-input:userData="user"></demo-child>
 ```
 
 `demo-parent.js`
 
 ```javascript
 // ...
+// self is defined in LWElement as `self = this`;
 user = { firstname: "Qian", lastname: "Chen" };
 // ...
 ```
 
-The child is able to access the `user` object passed in with `lw-input:`
-directive from `inputReady()` method.
+The child is able to access the `parent` and `user` object passed in with
+`lw-input:` directive from `inputReady()` method.
 `demo-child.js`
 
 ```javascript
 // ...
 inputReady() {
+  console.log(this.parent);
   console.log(this.userData);
 }
 // ...
@@ -476,9 +479,7 @@ Assuming npm module `lodash-es` is installed, you could use any of the
 following `import` statements for your web component class:
 
 ```javascript
-import { get } from "lodash-es"; // find from node_modules
-import get from "lodash-es/get.js"; // find from node_modules
-import * as _ from "lodash-es"; // find from node_modules
+import get from "/node_modules/lodash-es/get.js"; // find from node_modules
 ```
 
 Importing a JSON file:
@@ -490,7 +491,7 @@ import someJSON from "./some.json";
 Importing CSS/SCSS:
 
 ```javascript
-import agate from "highlight.js/scss/agate.scss";
+import agate from "/node_modules/highlight.js/scss/agate.scss";
 
 // customElements.define('demo-root',
 //  class extends LWElement {  // LWElement extends HTMLElement

package/commands/build.js

@@ -1,56 +1,68 @@
-(async () => {
-   const fs = require('fs');
-   const path = require('path');
-   const fse = require('fs-extra');
-   const utils = require('./utils.js');
-   const parser = require('../lib/lw-html-parser.js');
+import fs from 'fs';
+import fse from 'fs-extra';
+import * as utils from './utils.js';
+import * as parser from '../lib/lw-html-parser.js';
+
+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 () => {
    let env;
    const args = process.argv;
    if (args.length >= 3) {
       env = args[2];
    }
 
-   const replaceNodeModulesImport = (str, filePath) => {
-      // match import not starting with dot or slash
-      return str.replace(/^(\s*import.+?['"])([^\.|\/].+?)(['"].*)$/gm, (m, a, b, c) => {
-         if (b.startsWith(`~`)) {
-            // ~/package.json
-            return a + path.normalize(`${process.cwd()}/` + b.substring(1)) + c;
-         } else if (b.indexOf('/') > -1) {
-            // lodash-es/get.js
-            return a + path.normalize(`${process.cwd()}/node_modules/` + b) + c;
-         } else {
-            const nodeModulePath = `${process.cwd()}/node_modules/` + b + '/package.json';
-            const package = require(nodeModulePath);
-            // lodash-es
-            return a + path.normalize(`${process.cwd()}/node_modules/` + b + '/' + package.main) + c;
-         }
-      });
-   };
-
-   const walkDirSync = (dir, accept = null, callback) => {
-      fs.readdirSync(dir).forEach(f => {
-         let dirPath = path.join(dir, f);
-         const isDirectory = fs.statSync(dirPath).isDirectory() && (!accept || (typeof accept === 'function' && accept(dirPath, f)));
-         isDirectory ? walkDirSync(dirPath, accept, callback) : callback(path.join(dirPath));
-      });
-   };
-
-   const preprocessJsImport = filePath => {
-      if (filePath.toLowerCase().endsWith('.js') && !filePath.toLowerCase().endsWith('/ast.js') && !filePath.startsWith(`${utils.dirs.build}/lib/`)) {
-         let jsFileString = fs.readFileSync(filePath, 'utf8');
-         jsFileString = replaceNodeModulesImport(jsFileString, filePath);
-         fs.writeFileSync(filePath, jsFileString);
-      }
-   };
-
-   const buildDirFilter = dirPath => {
-      if (dirPath.startsWith(`${utils.dirs.build}/lib/`)) {
-         return false;
-      }
-      return true;
-   };
+   // const replaceNodeModulesImport = (str, filePath) => {
+   //    // match import not starting with dot or slash
+   //    return str.replace(/^([^\S\r\n]*(?:importScripts|import).+?['"])((?!\.|\/|http\:|https\:).*?)(['"].*)$/gm, (m, a, b, c) => {
+   //       if (b.startsWith(`~`)) {
+   //          // ~/package.json
+   //          return a + path.normalize(`${process.cwd()}/` + b.substring(1)) + c;
+   //       } else if (b.indexOf('/') > -1) {
+   //          // lodash-es/get.js
+   //          return a + path.normalize(`${process.cwd()}/node_modules/` + b) + c;
+   //       } else {
+   //          const nodeModulePath = `${process.cwd()}/node_modules/` + b + '/package.json';
+   //          const package = require(nodeModulePath);
+   //          // lodash-es
+   //          return a + path.normalize(`${process.cwd()}/node_modules/` + b + '/' + package.main) + c;
+   //       }
+   //    });
+   // };
+
+   // const walkDirSync = (dir, accept = null, callback) => {
+   //    fs.readdirSync(dir).forEach(f => {
+   //       let dirPath = path.join(dir, f);
+   //       const isDirectory = fs.statSync(dirPath).isDirectory() && (!accept || (typeof accept === 'function' && accept(dirPath, f)));
+   //       isDirectory ? walkDirSync(dirPath, accept, callback) : callback(path.join(dirPath));
+   //    });
+   // };
+
+   // const preprocessJsImport = filePath => {
+   //    if (
+   //       filePath.toLowerCase().endsWith('.js') &&
+   //       !filePath.toLowerCase().endsWith('/ast.js') &&
+   //       !filePath.startsWith(`${utils.dirs.build}/lib/`) &&
+   //       !filePath.startsWith(`${utils.dirs.build}/resources/`)
+   //    ) {
+   //       let jsFileString = fs.readFileSync(filePath, 'utf8');
+   //       jsFileString = replaceNodeModulesImport(jsFileString, filePath);
+   //       fs.writeFileSync(filePath, jsFileString);
+   //    }
+   // };
+
+   // const buildDirFilter = dirPath => {
+   //    if (dirPath.startsWith(`${utils.dirs.build}/lib/`)) {
+   //       return false;
+   //    }
+   //    return true;
+   // };
 
    const leanwebPackageJSON = require(`${__dirname}/../package.json`);
 
@@ -96,7 +108,7 @@
       };
 
       const buildJS = () => {
-         walkDirSync(buildDir, buildDirFilter, preprocessJsImport);
+         // walkDirSync(buildDir, buildDirFilter, preprocessJsImport);
 
          const jsString = project.components.reduce((acc, cur) => {
             const cmpName = utils.getComponentName(cur);

package/commands/clean.js

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

package/commands/destroy.js

@@ -1,24 +1,29 @@
-const fs = require('fs');
-const utils = require('./utils.js');
+import fs from 'fs';
+import * as utils from './utils.js';
 
-const args = process.argv;
-if (args.length < 3) {
-   console.log('Usage: lw destroy project-name');
-   console.log(`This will delete ${utils.dirs.src}/ ${utils.dirs.build}/ ${utils.dirs.dist}/ ${utils.dirs.serve}/ and ${utils.dirs.electron}/`)
-   return;
-}
+import { createRequire } from "module";
+const require = createRequire(import.meta.url);
 
-const projectName = args[2];
+(async () => {
+   const args = process.argv;
+   if (args.length < 3) {
+      console.log('Usage: lw destroy project-name');
+      console.log(`This will delete ${utils.dirs.src}/ ${utils.dirs.build}/ ${utils.dirs.dist}/ ${utils.dirs.serve}/ and ${utils.dirs.electron}/`)
+      return;
+   }
 
-const project = require(`${process.cwd()}/${utils.dirs.src}/leanweb.json`);
+   const projectName = args[2];
 
-if (projectName !== project.name) {
-   console.error('Error: project name doesn\'t match.');
-   return;
-}
+   const project = require(`${process.cwd()}/${utils.dirs.src}/leanweb.json`);
 
-fs.rmSync(utils.dirs.build + '/', { recursive: true, force: true });
-fs.rmSync(utils.dirs.dist + '/', { recursive: true, force: true });
-fs.rmSync(utils.dirs.src + '/', { recursive: true, force: true });
-fs.rmSync(utils.dirs.serve + '/', { recursive: true, force: true });
-fs.rmSync(utils.dirs.electron + '/', { recursive: true, force: true });
+   if (projectName !== project.name) {
+      console.error('Error: project name doesn\'t match.');
+      return;
+   }
+
+   fs.rmSync(utils.dirs.build + '/', { recursive: true, force: true });
+   fs.rmSync(utils.dirs.dist + '/', { recursive: true, force: true });
+   fs.rmSync(utils.dirs.src + '/', { recursive: true, force: true });
+   fs.rmSync(utils.dirs.serve + '/', { recursive: true, force: true });
+   fs.rmSync(utils.dirs.electron + '/', { recursive: true, force: true });
+})();

package/commands/dist.js

@@ -1,9 +1,13 @@
-const webpack = require('webpack');
-const utils = require('./utils.js');
-const fs = require('fs');
-const fse = require('fs-extra');
-const minify = require('html-minifier').minify;
-const CleanCSS = require('clean-css');
+import webpack from 'webpack';
+import * as utils from './utils.js';
+import fs from 'fs';
+import fse from 'fs-extra';
+// const minify = require('html-minifier').minify;
+import { minify } from 'html-minifier';
+import CleanCSS from 'clean-css';
+
+import { createRequire } from "module";
+const require = createRequire(import.meta.url);
 
 let env = '';
 const args = process.argv;
@@ -54,7 +58,7 @@ if (args.length >= 3) {
       fs.writeFileSync(`./${utils.dirs.dist}/${project.name}.css`, minifiedAppCss.styles);
 
       fse.copySync(`./${utils.dirs.build}/favicon.svg`, `./${utils.dirs.dist}/favicon.svg`);
-      project.resources.forEach(resource => {
+      project.resources?.forEach(resource => {
          fse.copySync(`./${utils.dirs.build}/${resource}`, `./${utils.dirs.dist}/${resource}`, { dereference: true });
       });
    });

package/commands/electron.js

@@ -1,9 +1,18 @@
-(async () => {
-   const fs = require('fs');
-   const fse = require('fs-extra');
-   const webpack = require('webpack');
-   const utils = require('./utils.js');
 
+import fs from 'fs';
+import fse from 'fs-extra';
+import webpack from 'webpack';
+import * as utils from './utils.js';
+
+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 () => {
    let env = '';
    const args = process.argv;
    if (args.length >= 3) {

package/commands/generate.js

@@ -1,7 +1,15 @@
-(async () => {
-   const fs = require('fs');
-   const utils = require('./utils.js');
+import fs from 'fs';
+import * as utils from './utils.js';
+
+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) {
       console.error('Usage: lw generate component-names');

package/commands/help.js

@@ -1,7 +1,6 @@
-(async () => {
-
-   const utils = require('./utils.js');
+import * as utils from './utils.js';
 
+(async () => {
    if (process.argv.length < 3) {
       utils.exec('npx lw version');
       console.log('Usage: lw target parameters');

package/commands/init.js

@@ -1,11 +1,19 @@
+import fs from 'fs';
+import fse from 'fs-extra';
+import git from 'isomorphic-git';
+import globby from 'globby';
+import * as utils from './utils.js';
+
+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 fs = require('fs');
-   const fse = require('fs-extra');
-   const path = require('path');
-   const git = require('isomorphic-git');
-   const globby = require('globby');
    const args = process.argv;
-   const utils = require('./utils.js');
 
    const leanwebJSONExisted = fs.existsSync(`${process.cwd()}/${utils.dirs.src}/leanweb.json`);
    const packageJSONExisted = fs.existsSync(`${process.cwd()}/package.json`);

package/commands/serve.js

@@ -1,8 +1,11 @@
-const fse = require('fs-extra');
-const utils = require('./utils.js');
-const webpack = require('webpack');
-const watch = require('node-watch');
-const WebpackDevServer = require('webpack-dev-server');
+import fse from 'fs-extra';
+import * as utils from './utils.js';
+import webpack from 'webpack';
+import watch from 'node-watch';
+import WebpackDevServer from 'webpack-dev-server';
+
+import { createRequire } from "module";
+const require = createRequire(import.meta.url);
 
 let env = '';
 const args = process.argv;

package/commands/upgrade.js

@@ -1,7 +1,15 @@
-const semver = require('semver');
-const fs = require('fs');
-const fse = require('fs-extra');
-const utils = require('./utils.js');
+import fs from 'fs';
+import fse from 'fs-extra';
+import semver from 'semver';
+import * as utils from './utils.js';
+
+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);
 
 const leanwebPackageJSON = require(`${__dirname}/../package.json`);
 const projectLeanwebJSON = require(`${process.cwd()}/${utils.dirs.src}/leanweb.json`);

package/commands/utils.js

@@ -1,11 +1,19 @@
-const { execSync } = require('child_process');
-const sass = require('sass');
-const path = require('path');
-const net = require('net');
-
-const fse = require('fs-extra');
-
-const dirs = {
+// const { execSync } = require('child_process');
+import { execSync } from 'child_process';
+// const sass = require('sass');
+import sass from 'sass';
+// import path from 'path';
+import path from 'path';
+// const net = require('net');
+import net from 'net';
+
+// import fse from 'fs-extra';
+import fse from 'fs-extra';
+
+import { createRequire } from "module";
+const require = createRequire(import.meta.url);
+
+export const dirs = {
    src: 'src',
    build: 'build',
    serve: 'serve',
@@ -13,14 +21,14 @@ const dirs = {
    electron: 'electron',
 };
 
-module.exports.copySymbolLinkFilter = (src, dest) => {
+export const copySymbolLinkFilter = (src, dest) => {
    const destStats = fse.existsSync(dest) && fse.lstatSync(dest);
    return !destStats?.isSymbolicLink?.();
 };
 
-module.exports.exec = command => execSync(command, { encoding: 'utf8', stdio: 'inherit' });
+export const exec = command => execSync(command, { encoding: 'utf8', stdio: 'inherit' });
 
-module.exports.buildCSS = (scssString, currentPaths) => {
+export const 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 });
@@ -29,7 +37,7 @@ module.exports.buildCSS = (scssString, currentPaths) => {
    return '';
 };
 
-module.exports.getComponentName = cmp => {
+export const getComponentName = cmp => {
    const indexOfLastSlash = cmp.lastIndexOf('/');
    if (indexOfLastSlash > -1) {
       return cmp.substring(indexOfLastSlash + 1);
@@ -37,7 +45,7 @@ module.exports.getComponentName = cmp => {
    return cmp;
 };
 
-module.exports.getPathLevels = filePath => {
+export const getPathLevels = filePath => {
    filePath = path.normalize(filePath);
    const numSlashes = filePath.replace(/[^\/]/g, '').length;
    let ret = '';
@@ -47,7 +55,7 @@ module.exports.getPathLevels = filePath => {
    return ret;
 };
 
-module.exports.throttle = (callback, limit = 100) => {
+export const throttle = (callback, limit = 100) => {
    let wait = false;
    return function () {
       if (!wait) {
@@ -60,7 +68,7 @@ module.exports.throttle = (callback, limit = 100) => {
    };
 };
 
-module.exports.getWebPackConfig = (outputDir, project) => {
+export const getWebPackConfig = (outputDir, project) => {
    return {
       entry: process.cwd() + `/${dirs.build}/${project.name}.js`,
       output: {
@@ -80,7 +88,7 @@ module.exports.getWebPackConfig = (outputDir, project) => {
                }]
             },
          }, {
-            test: /\.(scss|sass)$/i,
+            test: /\.(scss|sass|css)$/i,
             use: [
                {
                   loader: require.resolve('css-loader'),
@@ -113,7 +121,7 @@ module.exports.getWebPackConfig = (outputDir, project) => {
    }
 };
 
-module.exports.portInUse = (port, address = '127.0.0.1') => {
+export const portInUse = (port, address = '127.0.0.1') => {
    return new Promise((resolve, reject) => {
       const server = net.createServer(socket => socket.pipe(socket));
 
@@ -128,8 +136,6 @@ module.exports.portInUse = (port, address = '127.0.0.1') => {
    });
 };
 
-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
@@ -229,7 +235,7 @@ leanweb generate login is the same as leanweb g login
 const versionNote = `Usage: leanweb version
 Print version information for leanweb.`;
 
-module.exports.targets = {
+export const targets = {
    'init': { file: 'init.js', note: initNote },
    'generate': { file: 'generate.js', note: generateNote },
    'serve': { file: 'serve.js', note: serveNote },

package/commands/version.js

@@ -1,2 +1,4 @@
+import { createRequire } from "module";
+const require = createRequire(import.meta.url);
 const packageJSON = require('../package.json');
 console.log(packageJSON.name, packageJSON.version);

package/leanweb.js

@@ -1,10 +1,18 @@
 #!/usr/bin/env node
 
-(async () => {
+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);
 
-   const fs = require('fs');
-   const semver = require('semver');
-   const utils = require('./commands/utils.js');
+import path from 'path';
+import { fileURLToPath } from 'url';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+(async () => {
 
    const args = process.argv;
 

package/lib/lw-html-parser.js

@@ -1,5 +1,5 @@
-const parse5 = require('parse5');
-const parser = require('@babel/parser');
+import * as parse5 from 'parse5';
+import * as parser from '@babel/parser';
 
 let astKey = 0;
 
@@ -91,7 +91,7 @@ const walkNode = (node, interpolation) => {
    node.childNodes && node.childNodes.forEach(childNode => walkNode(childNode, interpolation));
 };
 
-const parse = html => {
+export const parse = html => {
    const ast = {};
    const doc = parse5.parseFragment(html, { sourceCodeLocationInfo: true });
    walkNode(doc, ast);
@@ -100,8 +100,6 @@ const parse = html => {
    return ast;
 };
 
-module.exports = { parse };
-
 
 // const html = `<div>
 // <span class="x" lw>/a/;(1+(2+3))</span>

package/package.json

@@ -1,11 +1,12 @@
 {
    "name": "leanweb",
-   "version": "1.0.9",
+   "version": "1.1.3",
    "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"
@@ -19,25 +20,25 @@
    "author": "Qian Chen",
    "license": "MIT",
    "dependencies": {
-      "@babel/core": "^7.16.7",
-      "@babel/parser": "^7.16.7",
-      "@babel/plugin-transform-runtime": "^7.16.7",
-      "@babel/preset-env": "^7.16.7",
+      "@babel/core": "^7.16.12",
+      "@babel/parser": "^7.16.12",
+      "@babel/plugin-transform-runtime": "^7.16.10",
+      "@babel/preset-env": "^7.16.11",
       "babel-loader": "^8.2.3",
-      "clean-css": "^5.2.2",
+      "clean-css": "^5.2.4",
       "css-loader": "^6.5.1",
       "fs-extra": "^10.0.0",
-      "globby": "^11.0.4",
+      "globby": "^13.1.0",
       "html-minifier": "^4.0.0",
-      "isomorphic-git": "^1.10.3",
+      "isomorphic-git": "^1.11.1",
       "json5-loader": "^4.0.1",
-      "node-watch": "^0.7.2",
+      "node-watch": "^0.7.3",
       "parse5": "^6.0.1",
       "raw-loader": "^4.0.2",
-      "sass": "^1.46.0",
+      "sass": "^1.49.0",
       "sass-loader": "^12.4.0",
       "semver": "^7.3.5",
-      "webpack": "^5.65.0",
-      "webpack-dev-server": "^4.7.2"
+      "webpack": "^5.67.0",
+      "webpack-dev-server": "^4.7.3"
    }
 }

package/templates/electron.js

@@ -1,4 +1,4 @@
-const { app, BrowserWindow } = require('electron');
+import { app, BrowserWindow } from 'electron';
 
 const createWindow = () => {
    // Create the browser window.

package/templates/lib/lw-element.js

@@ -97,6 +97,7 @@ const nextAllSiblings = (el, selector) => {
 };
 
 export default class LWElement extends HTMLElement {
+   me = self;
    constructor(ast) {
       super();
       this.ast = ast;