leanweb 1.1.2 → 1.1.6

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);
 }
 // ...

package/commands/build.js

@@ -18,52 +18,6 @@ const require = createRequire(import.meta.url);
       env = args[2];
    }
 
-   // 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`);
 
    const buildModule = (projectPath) => {
@@ -108,8 +62,6 @@ const require = createRequire(import.meta.url);
       };
 
       const buildJS = () => {
-         // walkDirSync(buildDir, buildDirFilter, preprocessJsImport);
-
          const jsString = project.components.reduce((acc, cur) => {
             const cmpName = utils.getComponentName(cur);
             let importString = `import './components/${cur}/${cmpName}.js';`;
@@ -121,18 +73,18 @@ const require = createRequire(import.meta.url);
       const buildHTML = () => {
          project.components.forEach(cmp => {
             const cmpName = utils.getComponentName(cmp);
-            const htmlFilename = `${projectPath}/${buildDir}/components/${cmp}/${cmpName}.html`;
+            const htmlFilename = `${buildDir}/components/${cmp}/${cmpName}.html`;
             const htmlFileExists = fs.existsSync(htmlFilename);
             if (htmlFileExists) {
 
-               const scssFilename = `${projectPath}/${buildDir}/components/${cmp}/${cmpName}.scss`;
+               const scssFilename = `${buildDir}/components/${cmp}/${cmpName}.scss`;
                const scssFileExists = fs.existsSync(scssFilename);
                let cssString = '';
                if (scssFileExists) {
-                  let scssString = `@use "global-styles.scss";\n`;
+                  let scssString = `@use "${buildDir}/global-styles.scss";\n`;
                   scssString += fs.readFileSync(scssFilename, 'utf8');
                   scssString += '\n[lw-false],[lw-for]{display:none !important;}\n';
-                  cssString = utils.buildCSS(scssString, `${projectPath}/${buildDir}/components/${cmp}`);
+                  cssString = utils.buildCSS(scssString, `${buildDir}/components/${cmp}`);
                }
                const styleString = cssString || '';
                const htmlString = fs.readFileSync(htmlFilename, 'utf8');
@@ -144,16 +96,16 @@ const require = createRequire(import.meta.url);
                fs.writeFileSync(`${buildDir}/components/${cmp}/ast.js`, `export default ${JSON.stringify(ast, null, 0)};`);
             }
          });
-         const htmlString = fs.readFileSync(`${projectPath}/${buildDir}/index.html`, 'utf8');
+         const htmlString = fs.readFileSync(`${buildDir}/index.html`, 'utf8');
          fs.writeFileSync(`${buildDir}/index.html`, htmlString);
       };
 
       const buildSCSS = () => {
-         const projectScssFilename = `${projectPath}/src/${project.name}.scss`;
+         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, `${projectPath}/${buildDir}`);
+            projectCssString += utils.buildCSS(projectScssString, buildDir);
          }
          fs.writeFileSync(`${buildDir}/${project.name}.css`, projectCssString);
       };

package/commands/init.js

@@ -1,7 +1,7 @@
 import fs from 'fs';
 import fse from 'fs-extra';
 import git from 'isomorphic-git';
-import globby from 'globby';
+import { globby } from 'globby';
 import * as utils from './utils.js';
 
 import path from 'path';

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "leanweb",
-   "version": "1.1.2",
+   "version": "1.1.6",
    "description": "Builds framework agnostic web components.",
    "bin": {
       "leanweb": "leanweb.js",
@@ -20,25 +20,25 @@
    "author": "Qian Chen",
    "license": "MIT",
    "dependencies": {
-      "@babel/core": "^7.16.12",
-      "@babel/parser": "^7.16.12",
-      "@babel/plugin-transform-runtime": "^7.16.10",
+      "@babel/core": "^7.17.0",
+      "@babel/parser": "^7.17.0",
+      "@babel/plugin-transform-runtime": "^7.17.0",
       "@babel/preset-env": "^7.16.11",
       "babel-loader": "^8.2.3",
       "clean-css": "^5.2.4",
-      "css-loader": "^6.5.1",
+      "css-loader": "^6.6.0",
       "fs-extra": "^10.0.0",
-      "globby": "^13.1.0",
+      "globby": "^13.1.1",
       "html-minifier": "^4.0.0",
-      "isomorphic-git": "^1.11.1",
+      "isomorphic-git": "^1.11.2",
       "json5-loader": "^4.0.1",
       "node-watch": "^0.7.3",
       "parse5": "^6.0.1",
       "raw-loader": "^4.0.2",
-      "sass": "^1.49.0",
+      "sass": "^1.49.7",
       "sass-loader": "^12.4.0",
       "semver": "^7.3.5",
-      "webpack": "^5.67.0",
-      "webpack-dev-server": "^4.7.3"
+      "webpack": "^5.68.0",
+      "webpack-dev-server": "^4.7.4"
    }
 }

package/templates/lib/lw-element.js

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