leanweb 1.3.5 → 2.0.0

package/README.md

@@ -56,7 +56,6 @@ looks like:
   "name": "demo",
   "version": "0.4.5",
   "components": ["root"],
-  "imports": [],
   "resources": ["resources/"]
 }
 ```
@@ -106,13 +105,6 @@ changes in the code, and save, the browser should refresh automatically to
 reflect your changes.
 <img src='https://leanweb.app/images/leanweb-serve.png' alt='lw serve' width='640'/>
 
-### `leanweb electron` or `lw electron`
-
-Run `lw electron` or even `lw elec` and you should see an electron app window
-open as follows:
-
-<img src='https://leanweb.app/images/leanweb-electron.png' alt='lw electron' width='640'/>
-
 ### `leanweb generate` or `lw generate`
 
 Let's create a `login` web component with `lw generate` or `lw g`.
@@ -129,7 +121,6 @@ Now the `leanweb.json` has one more entry in the component list:
   "name": "demo",
   "version": "0.4.5",
   "components": ["root", "login"],
-  "imports": [],
   "resources": ["resources/"]
 }
 ```
@@ -164,11 +155,6 @@ the `login` component does not affect other components.
 
 <img src='https://leanweb.app/images/leanweb-serve-1.png' alt='lw serve' width='640'/>
 
-Run `lw electron` again, and you will see the same changes reflected in
-the electron app.
-
-<img src='https://leanweb.app/images/leanweb-electron-1.png' alt='lw electron' width='640'/>
-
 ### `leanweb dist` or `lw dist`
 
 Run `lw dist`, and a `dist` directory will be created with minified files
@@ -496,21 +482,6 @@ selectedRange = 10;
 
 <img src='https://leanweb.app/images/leanweb-form-binding-range.gif' alt='Leanweb Form Binding Range' />
 
-## Import libraries from `node_modules`
-
-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 "/node_modules/lodash-es/get.js"; // find from node_modules
-```
-
-Importing a JSON file:
-
-```javascript
-import someJSON from "./some.json";
-```
-
 ## Component Communication
 
 The following project demonstrates how Leanweb helps web components to talk to

package/commands/build.js

@@ -1,132 +1,103 @@
-import fs from 'fs';
-import fse from 'fs-extra';
-import { minify } from 'html-minifier';
-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 leanwebPackageJSON = require(`${__dirname}/../package.json`);
-
-   const buildModule = (projectPath) => {
-
-      const project = require(`${projectPath}/${utils.dirs.src}/leanweb.json`);
-      const isMain = process.cwd() === projectPath;
-
-      const buildDir = isMain ? utils.dirs.build : `${utils.dirs.build}/_dependencies/${project.name}`;
-      fs.mkdirSync(buildDir, { recursive: true });
-
-      let depImports = '';
-      project.imports?.forEach(im => {
-         let depPath;
-         if (im.indexOf('/') < 0) {
-            depPath = `${process.cwd()}/node_modules/${im}`;
-         } else {
-            if (im.startsWith('./')) {
-               depPath = `${process.cwd()}/${im}`;
-            } else if (im.startsWith('/')) {
-               depPath = im;
-            } else {
-               depPath = `${process.cwd()}/node_modules/${im}`;
-            }
-         }
-         const depName = buildModule(depPath);
-         if (isMain) {
-            depImports += `import './_dependencies/${depName}/${depName}.js';\n`;
-         } else {
-            depImports += `import '../${depName}/${depName}.js';\n`;
-         }
+import fs from 'fs';
+import fse from 'fs-extra';
+import { minify } from 'html-minifier';
+import * as utils from './utils.js';
+import * as parser from '../lib/lw-html-parser.js';
 
+(async () => {
+  let env;
+  const args = process.argv;
+  if (args.length >= 3) {
+    env = args[2];
+  }
+
+  const leanwebPackageJSON = require(`${__dirname}/../package.json`);
+
+  const buildModule = (projectPath) => {
+
+    const project = require(`${projectPath}/${utils.dirs.src}/leanweb.json`);
+
+    fs.mkdirSync(utils.dirs.build, { recursive: true });
+
+    const copySrc = () => {
+      fse.copySync(`${projectPath}/${utils.dirs.src}/`, utils.dirs.build, { filter: utils.copySymbolLinkFilter });
+    };
+
+    const copyEnv = () => {
+      if (env) {
+        fse.copySync(`${utils.dirs.build}/env/${env}.js`, `${utils.dirs.build}/env.js`);
+      }
+    };
+
+    const buildJS = () => {
+      const jsString = project.components.reduce((acc, cur) => {
+        const cmpName = utils.getComponentName(cur);
+        let importString = `import './components/${cur}/${cmpName}.js';`;
+        return acc + importString + '\n';
+      }, '');
+      fs.writeFileSync(`${utils.dirs.build}/${project.name}.js`, jsString);
+    };
+
+    const buildHTML = () => {
+      project.components.forEach(cmp => {
+        const cmpName = utils.getComponentName(cmp);
+        const htmlFilename = `${utils.dirs.build}/components/${cmp}/${cmpName}.html`;
+        const htmlFileExists = fs.existsSync(htmlFilename);
+        if (htmlFileExists) {
+          const scssFilename = `${utils.dirs.build}/components/${cmp}/${cmpName}.scss`;
+          const scssFileExists = fs.existsSync(scssFilename);
+          let cssString = '';
+          if (scssFileExists) {
+            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, utils.dirs.build, `${utils.dirs.build}/components/${cmp}`);
+          }
+          const styleString = cssString || '';
+          const htmlString = fs.readFileSync(htmlFilename, 'utf8');
+          const minifiedHtml = minify(htmlString, {
+            caseSensitive: true,
+            collapseWhitespace: true,
+            minifyCSS: true,
+            minifyJS: true,
+            removeComments: true,
+          });
+          const ast = parser.parse(minifiedHtml);
+          ast.css = styleString;
+          ast.componentFullName = project.name + '-' + cmp.replace(/\//g, '-');
+          ast.runtimeVersion = project.version;
+          ast.builderVersion = leanwebPackageJSON.version;
+          fs.writeFileSync(`${utils.dirs.build}/components/${cmp}/ast.js`, `export default ${JSON.stringify(ast, null, 0)};`);
+        }
       });
-
-      const copySrc = () => {
-         fse.copySync(`${projectPath}/${utils.dirs.src}/`, buildDir, { filter: utils.copySymbolLinkFilter });
-      };
-
-      const copyEnv = () => {
-         if (env) {
-            fse.copySync(`${buildDir}/env/${env}.js`, `${buildDir}/env.js`);
-         }
-      };
-
-      const buildJS = () => {
-         const jsString = project.components.reduce((acc, cur) => {
-            const cmpName = utils.getComponentName(cur);
-            let importString = `import './components/${cur}/${cmpName}.js';`;
-            return acc + importString + '\n';
-         }, depImports + '\n');
-         fs.writeFileSync(`${buildDir}/${project.name}.js`, jsString);
-      };
-
-      const buildHTML = () => {
-         project.components.forEach(cmp => {
-            const cmpName = utils.getComponentName(cmp);
-            const htmlFilename = `${buildDir}/components/${cmp}/${cmpName}.html`;
-            const htmlFileExists = fs.existsSync(htmlFilename);
-            if (htmlFileExists) {
-
-               const scssFilename = `${buildDir}/components/${cmp}/${cmpName}.scss`;
-               const scssFileExists = fs.existsSync(scssFilename);
-               let cssString = '';
-               if (scssFileExists) {
-                  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, `${buildDir}/components/${cmp}`);
-               }
-               const styleString = cssString || '';
-               const htmlString = fs.readFileSync(htmlFilename, 'utf8');
-               const minifiedHtml = minify(htmlString, {
-                caseSensitive: true,
-                collapseWhitespace: true,
-                minifyCSS: true,
-                minifyJS: true,
-                removeComments: true,
-             });
-               const ast = parser.parse(minifiedHtml);
-               ast.css = styleString;
-               ast.componentFullName = project.name + '-' + cmp.replace(/\//g, '-');
-               ast.runtimeVersion = project.version;
-               ast.builderVersion = leanwebPackageJSON.version;
-               fs.writeFileSync(`${buildDir}/components/${cmp}/ast.js`, `export default ${JSON.stringify(ast, null, 0)};`);
-            }
-         });
-         const htmlString = fs.readFileSync(`${buildDir}/index.html`, 'utf8');
-         fs.writeFileSync(`${buildDir}/index.html`, htmlString);
-      };
-
-      const buildSCSS = () => {
-         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, buildDir);
-         }
-         fs.writeFileSync(`${buildDir}/${project.name}.css`, projectCssString);
-      };
-
-      copySrc();
-      copyEnv();
-      buildJS();
-      buildSCSS();
-      buildHTML();
-
-      return project.name;
-   };
-
-   buildModule(process.cwd());
+    };
+
+    const buildSCSS = () => {
+      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, utils.dirs.build);
+      }
+      fs.writeFileSync(`${utils.dirs.build}/${project.name}.css`, projectCssString);
+    };
+
+    copySrc();
+    copyEnv();
+    buildJS();
+    buildSCSS();
+    buildHTML();
+
+    return project.name;
+  };
+
+  buildModule(process.cwd());
 
 })();

package/commands/clean.js

@@ -2,7 +2,7 @@ import fs from 'fs';
 import * as utils from './utils.js';
 
 (async () => {
-   fs.rmSync(utils.dirs.build + '/', { recursive: true, force: true });
-   fs.rmSync(utils.dirs.dist + '/', { recursive: true, force: true });
-   fs.rmSync(utils.dirs.serve + '/', { recursive: true, force: true });
+  fs.rmSync(utils.dirs.build + '/', { recursive: true, force: true });
+  fs.rmSync(utils.dirs.dist + '/', { recursive: true, force: true });
+  fs.rmSync(utils.dirs.serve + '/', { recursive: true, force: true });
 })();

package/commands/destroy.js

@@ -1,29 +1,28 @@
-import fs from 'fs';
-import * as utils from './utils.js';
-
 import { createRequire } from "module";
 const require = createRequire(import.meta.url);
 
+import fs from 'fs';
+import * as utils from './utils.js';
+
 (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 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}/ and ${utils.dirs.serve}/`)
+    return;
+  }
 
-   const projectName = args[2];
+  const projectName = args[2];
 
-   const project = require(`${process.cwd()}/${utils.dirs.src}/leanweb.json`);
+  const project = require(`${process.cwd()}/${utils.dirs.src}/leanweb.json`);
 
-   if (projectName !== project.name) {
-      console.error('Error: project name doesn\'t match.');
-      return;
-   }
+  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 });
+  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 });
 })();

package/commands/dist.js

@@ -1,72 +1,58 @@
-import webpack from 'webpack';
+import { createRequire } from "module";
+const require = createRequire(import.meta.url);
+
 import * as utils from './utils.js';
 import fs from 'fs';
 import fse from 'fs-extra';
 import { minify } from 'html-minifier';
 import CleanCSS from 'clean-css';
 
-import { createRequire } from "module";
-const require = createRequire(import.meta.url);
+import esbuild from 'esbuild';
 
 let env = '';
 const args = process.argv;
 if (args.length >= 3) {
-   env = args[2];
+  env = args[2];
 }
 
 (async () => {
-   const project = require(`${process.cwd()}/${utils.dirs.src}/leanweb.json`);
-
-   await utils.exec(`npx leanweb clean`);
-   await utils.exec(`npx leanweb build ${env}`);
-
-   const webpackConfig = utils.getWebPackConfig(utils.dirs.dist, project);
-
-   const compiler = webpack({
-      ...webpackConfig,
-      mode: 'production',
-      devtool: 'source-map',
-      performance: {
-         hints: false,
-      },
-   });
-
-   compiler.run(async (err, stats) => {
-      if (err) {
-         console.log(err);
-      }
-      if (stats.compilation.errors.length) {
-         console.log(stats.compilation.errors);
-      }
-      if (stats.compilation.warnings.length) {
-         console.log(stats.compilation.warnings);
-      }
-
-      const indexHTML = fs.readFileSync(`./${utils.dirs.build}/index.html`, 'utf8');
-      const minifiedIndexHtml = minify(indexHTML, {
-         caseSensitive: true,
-         collapseWhitespace: true,
-         minifyCSS: true,
-         minifyJS: true,
-         removeComments: true,
-      });
-      fs.writeFileSync(`./${utils.dirs.dist}/index.html`, minifiedIndexHtml);
-
-      const appCSS = fs.readFileSync(`./${utils.dirs.build}/${project.name}.css`, 'utf8');
-      const minifiedAppCss = new CleanCSS({}).minify(appCSS);
-      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 => {
-         const source = `./${utils.dirs.build}/${resource}`;
-         if (fs.existsSync(source)) {
-            fse.copySync(source, `./${utils.dirs.dist}/${resource}`, { dereference: true });
-         }
-      });
-
-      const postDistFile = './post-dist';
-      if (fs.existsSync(postDistFile) && fs.statSync(postDistFile).isFile()) {
-         await utils.exec(postDistFile);
-      }
-   });
+  const project = require(`${process.cwd()}/${utils.dirs.src}/leanweb.json`);
+
+  await utils.exec(`npx leanweb clean`);
+  await utils.exec(`npx leanweb build ${env}`);
+
+  fs.mkdirSync(utils.dirs.dist, { recursive: true });
+  esbuild.build({
+    entryPoints: [`./${utils.dirs.build}/${project.name}.js`],
+    bundle: true,
+    format: 'esm',
+    outfile: `./${utils.dirs.dist}/${project.name}.js`,
+  }).catch(() => process.exit(1))
+
+  const indexHTML = fs.readFileSync(`./${utils.dirs.build}/index.html`, 'utf8');
+  const minifiedIndexHtml = minify(indexHTML, {
+    caseSensitive: true,
+    collapseWhitespace: true,
+    minifyCSS: true,
+    minifyJS: true,
+    removeComments: true,
+  });
+  fs.writeFileSync(`./${utils.dirs.dist}/index.html`, minifiedIndexHtml);
+
+  const appCSS = fs.readFileSync(`./${utils.dirs.build}/${project.name}.css`, 'utf8');
+  const minifiedAppCss = new CleanCSS({}).minify(appCSS);
+  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 => {
+    const source = `./${utils.dirs.build}/${resource}`;
+    if (fs.existsSync(source)) {
+      fse.copySync(source, `./${utils.dirs.dist}/${resource}`, { dereference: true });
+    }
+  });
+
+  const postDistFile = './post-dist';
+  if (fs.existsSync(postDistFile) && fs.statSync(postDistFile).isFile()) {
+    await utils.exec(postDistFile);
+  }
 })();

package/commands/generate.js

@@ -1,58 +1,57 @@
-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);
 
+import fs from 'fs';
+import * as utils from './utils.js';
+
 (async () => {
-   const args = process.argv;
-   if (args.length < 3) {
-      console.error('Usage: lw generate component-names');
-      return;
-   }
-
-   const leanwebJSONPath = `${process.cwd()}/${utils.dirs.src}/leanweb.json`;
-   const leanwebJSON = require(leanwebJSONPath);
-   const cmps = args.slice(2);
-
-   for (const cmpJSON of leanwebJSON.components) {
-      for (const cmp of cmps) {
-         if (cmpJSON === cmp) {
-            console.error(`Error: component ${cmpJSON} existed.`);
-            return;
-         }
+  const args = process.argv;
+  if (args.length < 3) {
+    console.error('Usage: lw generate component-names');
+    return;
+  }
+
+  const leanwebJSONPath = `${process.cwd()}/${utils.dirs.src}/leanweb.json`;
+  const leanwebJSON = require(leanwebJSONPath);
+  const cmps = args.slice(2);
+
+  for (const cmpJSON of leanwebJSON.components) {
+    for (const cmp of cmps) {
+      if (cmpJSON === cmp) {
+        console.error(`Error: component ${cmpJSON} existed.`);
+        return;
       }
-   }
+    }
+  }
 
-   leanwebJSON.components.push(...cmps);
-   fs.writeFileSync(leanwebJSONPath, JSON.stringify(leanwebJSON, null, 2));
+  leanwebJSON.components.push(...cmps);
+  fs.writeFileSync(leanwebJSONPath, JSON.stringify(leanwebJSON, null, 2));
 
-   for (const cmp of cmps) {
-      const cmpName = utils.getComponentName(cmp);
-      const cmpPath = `${utils.dirs.src}/components/${cmp}`;
+  for (const cmp of cmps) {
+    const cmpName = utils.getComponentName(cmp);
+    const cmpPath = `${utils.dirs.src}/components/${cmp}`;
 
-      fs.mkdirSync(cmpPath, { recursive: true });
+    fs.mkdirSync(cmpPath, { recursive: true });
 
-      if (!fs.existsSync(`${cmpPath}/${cmpName}.js`)) {
-         let jsString = fs.readFileSync(`${__dirname}/../templates/component.js`, 'utf8');
-         jsString = jsString.replace(/\$\{projectName\}/g, leanwebJSON.name);
-         jsString = jsString.replace(/\$\{component\}/g, cmp.replace(/\//g, '-'));
-         jsString = jsString.replace(/\$\{pathLevels\}/g, utils.getPathLevels(cmp));
+    if (!fs.existsSync(`${cmpPath}/${cmpName}.js`)) {
+      let jsString = fs.readFileSync(`${__dirname}/../templates/component.js`, 'utf8');
+      jsString = jsString.replace(/\$\{projectName\}/g, leanwebJSON.name);
+      jsString = jsString.replace(/\$\{component\}/g, cmp.replace(/\//g, '-'));
+      jsString = jsString.replace(/\$\{pathLevels\}/g, utils.getPathLevels(cmp));
 
-         fs.writeFileSync(`${cmpPath}/${cmpName}.js`, jsString);
-      }
+      fs.writeFileSync(`${cmpPath}/${cmpName}.js`, jsString);
+    }
 
-      if (!fs.existsSync(`${cmpPath}/${cmpName}.html`)) {
-         fs.writeFileSync(`${cmpPath}/${cmpName}.html`, `<div>${leanwebJSON.name}-${cmpName} works!</div>`);
-      }
+    if (!fs.existsSync(`${cmpPath}/${cmpName}.html`)) {
+      fs.writeFileSync(`${cmpPath}/${cmpName}.html`, `<div>${leanwebJSON.name}-${cmpName} works!</div>`);
+    }
 
-      if (!fs.existsSync(`${cmpPath}/${cmpName}.scss`)) {
-         fs.writeFileSync(`${cmpPath}/${cmpName}.scss`, '');
-      }
-   }
+    if (!fs.existsSync(`${cmpPath}/${cmpName}.scss`)) {
+      fs.writeFileSync(`${cmpPath}/${cmpName}.scss`, '');
+    }
+  }
 })();

package/commands/help.js

@@ -1,31 +1,31 @@
 import * as utils from './utils.js';
 
 (async () => {
-   if (process.argv.length < 3) {
-      utils.exec('npx leanweb version');
-      console.log('Usage: lw target parameters');
-      console.log('Targets:\n');
-      Object.keys(utils.targets).forEach(t => {
-         console.log(t);
-      });
-      console.log();
-      return;
-   }
+  if (process.argv.length < 3) {
+    utils.exec('npx leanweb version');
+    console.log('Usage: lw target parameters');
+    console.log('Targets:\n');
+    Object.keys(utils.targets).forEach(t => {
+      console.log(t);
+    });
+    console.log();
+    return;
+  }
 
-   let target = process.argv[2];
+  let target = process.argv[2];
 
-   const targetCandidates = Object.keys(utils.targets).filter(t => t.startsWith(target));
+  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;
-   }
+  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];
-   console.log(utils.targets[target].note);
+  target = targetCandidates[0];
+  console.log(utils.targets[target].note);
 })();