leanweb 1.1.7 → 1.2.0

package/README.md

@@ -488,21 +488,6 @@ Importing a JSON file:
 import someJSON from "./some.json";
 ```
 
-Importing CSS/SCSS:
-
-```javascript
-import agate from "/node_modules/highlight.js/scss/agate.scss";
-
-// customElements.define('demo-root',
-//  class extends LWElement {  // LWElement extends HTMLElement
-//    constructor() {
-//      super(ast);
-super.applyStyles(agate);
-//    }
-//  }
-//);
-```
-
 ## Component Communication
 
 The following project demonstrates how Leanweb helps web components to talk to
@@ -674,11 +659,6 @@ Called when the componnet `lw-if` is evaluated `false`.
 If `urlHashChanged()` is defined as a function, it will be called whenever the
 urlHash changes. This could be useful to update the DOM in component routing.
 
-#### applyStyles(...styles)
-
-`applyStyles` will apply the styles that is imported from a css or scss into
-the web component DOM.
-
 ### LWEventBus
 
 `LWElement` comes with a global instance of `LWEventBus` that helps web
@@ -708,6 +688,11 @@ being notified when a next event is fired.
 parameters. `eventName` is the name of the event, and `data` is the payload data
 of the event.
 
+### Post dist hook
+
+If `post-dist` file is present in the project root directory, it will be called
+after `lw dist` is done. This could be useful to copy dist/\* to somewhere else.
+
 ## More examples and tutorials
 
 https://leanweb.app

package/commands/build.js

@@ -81,10 +81,10 @@ const require = createRequire(import.meta.url);
                const scssFileExists = fs.existsSync(scssFilename);
                let cssString = '';
                if (scssFileExists) {
-                  let scssString = `@use "${buildDir}/global-styles.scss";\n`;
+                  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, `${buildDir}/components/${cmp}`);
+                  cssString = utils.buildCSS(scssString, buildDir, `${buildDir}/components/${cmp}`);
                }
                const styleString = cssString || '';
                const htmlString = fs.readFileSync(htmlFilename, 'utf8');

package/commands/dist.js

@@ -61,5 +61,9 @@ if (args.length >= 3) {
       project.resources?.forEach(resource => {
          fse.copySync(`./${utils.dirs.build}/${resource}`, `./${utils.dirs.dist}/${resource}`, { dereference: true });
       });
+
+      if (fs.statSync(`./post-dist`).isFile()) {
+         await utils.exec(`./post-dist`);
+      }
    });
 })();

package/commands/utils.js

@@ -28,10 +28,10 @@ export const copySymbolLinkFilter = (src, dest) => {
 
 export const exec = command => execSync(command, { encoding: 'utf8', stdio: 'inherit' });
 
-export const 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 });
+      const loadPaths = [...currentPaths, path.resolve(process.cwd(), dirs.build), path.resolve(process.cwd(), 'node_modules')];
+      const cssResult = sass.compileString(scssString, { loadPaths });
       return cssResult.css.toString().trim();
    }
    return '';

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "leanweb",
-   "version": "1.1.7",
+   "version": "1.2.0",
    "description": "Builds framework agnostic web components.",
    "bin": {
       "leanweb": "leanweb.js",
@@ -20,25 +20,25 @@
    "author": "Qian Chen",
    "license": "MIT",
    "dependencies": {
-      "@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.6.0",
-      "fs-extra": "^10.0.0",
-      "globby": "^13.1.1",
+      "@babel/core": "^7.18.10",
+      "@babel/parser": "^7.18.10",
+      "@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.11.2",
+      "isomorphic-git": "^1.19.1",
       "json5-loader": "^4.0.1",
       "node-watch": "^0.7.3",
-      "parse5": "^6.0.1",
+      "parse5": "^7.0.0",
       "raw-loader": "^4.0.2",
-      "sass": "^1.49.7",
-      "sass-loader": "^12.4.0",
-      "semver": "^7.3.5",
-      "webpack": "^5.68.0",
-      "webpack-dev-server": "^4.7.4"
+      "sass": "^1.54.2",
+      "sass-loader": "^13.0.2",
+      "semver": "^7.3.7",
+      "webpack": "^5.74.0",
+      "webpack-dev-server": "^4.9.3"
    }
 }

package/templates/lib/lw-element.js

@@ -193,7 +193,7 @@ export default class LWElement extends HTMLElement {
    }
 
    _bindMethods() {
-      const methodNames = ['update', 'applyStyles'];
+      const methodNames = ['update'];
       const proto = Object.getPrototypeOf(this);
       methodNames.push(...Object.getOwnPropertyNames(proto).filter(name => hasMethod(proto, name)));
       methodNames.push(...Object.getOwnPropertyNames(this).filter(name => hasMethod(this, name)));
@@ -467,18 +467,4 @@ export default class LWElement extends HTMLElement {
          this.update(node);
       });
    }
-
-   applyStyles(...styles) {
-      if (!styles) {
-         return;
-      }
-      styles.forEach(style => {
-         if (typeof style !== 'string') {
-            style = style.toString();
-         }
-         const styleNode = document.createElement('style');
-         styleNode.innerHTML = style;
-         this.shadowRoot.appendChild(styleNode);
-      });
-   }
 }