leanweb 1.3.6 → 2.0.1

package/commands/init.js

@@ -1,51 +1,44 @@
-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 args = process.argv;
+import fs from 'fs';
+import fse from 'fs-extra';
+import git from 'isomorphic-git';
+import { globby } from 'globby';
+import * as utils from './utils.js';
 
-   const leanwebJSONExisted = fs.existsSync(`${process.cwd()}/${utils.dirs.src}/leanweb.json`);
-   const packageJSONExisted = fs.existsSync(`${process.cwd()}/package.json`);
+(async () => {
+  const args = process.argv;
 
-   const lwPackage = require(`${__dirname}/../package.json`);
+  const leanwebJSONExisted = fs.existsSync(`${process.cwd()}/${utils.dirs.src}/leanweb.json`);
 
-   if (leanwebJSONExisted) {
-      console.error('Error: leanweb.json existed.');
-      return;
-   }
+  const lwPackage = require(`${__dirname}/../package.json`);
 
-   if (!packageJSONExisted) {
-      utils.exec(`npm init -y`);
-   }
+  if (leanwebJSONExisted) {
+    console.error('Error: leanweb.json existed.');
+    return;
+  }
 
-   let projectName = path.basename(path.resolve());
+  let projectName = path.basename(path.resolve());
 
-   if (args.length >= 3) {
-      projectName = args[2];
-   }
+  if (args.length >= 3) {
+    projectName = args[2];
+  }
 
-   const leanwebData = {
-      name: projectName,
-      version: lwPackage.version,
-      components: [],
-      imports: [],
-      resources: [
-         'resources/'
-      ],
-   };
+  const leanwebData = {
+    name: projectName,
+    version: lwPackage.version,
+    components: [],
+    resources: [
+      'resources/'
+    ],
+  };
 
-   const projectScss = `// html,
+  const projectScss = `// html,
 // body {
    // height: 100%;
    // width: 100%;
@@ -56,55 +49,53 @@ const require = createRequire(import.meta.url);
 // }
 `
 
-   const globalScss = `// div {
+  const globalScss = `// div {
 //    color: tomato;
 // }
 `;
 
-   fs.mkdirSync(`${utils.dirs.src}/resources/`, { recursive: true });
-   fs.writeFileSync(`${utils.dirs.src}/leanweb.json`, JSON.stringify(leanwebData, null, 2));
-
-   utils.exec(`npm i -D @babel/runtime --loglevel=error`);
-
-   utils.exec(`npx leanweb generate root`);
-
-   fse.copySync(`${__dirname}/../templates/lib`, `./${utils.dirs.src}/lib/`);
-
-   let htmlString = fs.readFileSync(`${__dirname}/../templates/index.html`, 'utf8');
-   htmlString = htmlString.replace(/\$\{project\.name\}/g, projectName);
-   fs.writeFileSync(`./${utils.dirs.src}/index.html`, htmlString);
-   fs.writeFileSync(`./src/${projectName}.scss`, projectScss);
-   fs.writeFileSync(`./${utils.dirs.src}/global-styles.scss`, globalScss);
-   fse.copySync(`${__dirname}/../templates/favicon.svg`, `./${utils.dirs.src}/favicon.svg`);
-   fse.copySync(`${__dirname}/../templates/env.js`, `./${utils.dirs.src}/env.js`);
-   fse.copySync(`${__dirname}/../templates/env/`, `./${utils.dirs.src}/env/`);
-
-   if (!(fs.existsSync(`${process.cwd()}/.git/`) && fs.statSync(`${process.cwd()}/.git/`).isDirectory())) {
-      await git.init({ fs, dir: process.cwd() });
-
-      if (fs.existsSync(`${process.cwd()}/.gitignore`) && fs.statSync(`${process.cwd()}/.gitignore`).isFile()) {
-         fs.appendFileSync(`${process.cwd()}/.gitignore`, `\nnode_modules/\n${utils.dirs.build}/\n${utils.dirs.dist}/\n${utils.dirs.serve}/\n${utils.dirs.electron}/\n`, 'utf8');
-      } else {
-         fs.writeFileSync(`${process.cwd()}/.gitignore`, `node_modules/\n${utils.dirs.build}/\n${utils.dirs.dist}/\n${utils.dirs.serve}/\n${utils.dirs.electron}/\n`, 'utf8');
-      }
-
-      const paths = await globby(['./**', './**/.*'], { gitignore: true });
-      for (const filepath of paths) {
-         await git.add({ fs, dir: process.cwd(), filepath });
-      }
-      await git.commit({
-         fs,
-         dir: process.cwd(),
-         author: {
-            name: 'Leanweb',
-            email: 'leanweb@leanweb.app',
-         },
-         message: 'lw init'
-      });
-      console.log('\nSome useful commands:');
-      console.log('"lw s" to start the dev server.');
-      console.log('"lw di" to build for production. The output will be in dist/ directory.');
-      console.log('"lw g my-new-component" to generate a new standard web component.');
-      console.log('"lw h" to get more help information.');
-   }
+  fs.mkdirSync(`${utils.dirs.src}/resources/`, { recursive: true });
+  fs.writeFileSync(`${utils.dirs.src}/leanweb.json`, JSON.stringify(leanwebData, null, 2));
+
+  utils.exec(`npx leanweb generate root`);
+
+  fse.copySync(`${__dirname}/../templates/lib`, `./${utils.dirs.src}/lib/`);
+
+  let htmlString = fs.readFileSync(`${__dirname}/../templates/index.html`, 'utf8');
+  htmlString = htmlString.replace(/\$\{project\.name\}/g, projectName);
+  fs.writeFileSync(`./${utils.dirs.src}/index.html`, htmlString);
+  fs.writeFileSync(`./src/${projectName}.scss`, projectScss);
+  fs.writeFileSync(`./${utils.dirs.src}/global-styles.scss`, globalScss);
+  fse.copySync(`${__dirname}/../templates/favicon.svg`, `./${utils.dirs.src}/favicon.svg`);
+  fse.copySync(`${__dirname}/../templates/env.js`, `./${utils.dirs.src}/env.js`);
+  fse.copySync(`${__dirname}/../templates/env/`, `./${utils.dirs.src}/env/`);
+
+  if (!(fs.existsSync(`${process.cwd()}/.git/`) && fs.statSync(`${process.cwd()}/.git/`).isDirectory())) {
+    await git.init({ fs, dir: process.cwd() });
+
+    if (fs.existsSync(`${process.cwd()}/.gitignore`) && fs.statSync(`${process.cwd()}/.gitignore`).isFile()) {
+      fs.appendFileSync(`${process.cwd()}/.gitignore`, `\n${utils.dirs.build}/\n${utils.dirs.dist}/\n${utils.dirs.serve}/\n`, 'utf8');
+    } else {
+      fs.writeFileSync(`${process.cwd()}/.gitignore`, `${utils.dirs.build}/\n${utils.dirs.dist}/\n${utils.dirs.serve}/\n`, 'utf8');
+    }
+
+    const paths = await globby(['./**', './**/.*'], { gitignore: true });
+    for (const filepath of paths) {
+      await git.add({ fs, dir: process.cwd(), filepath });
+    }
+    await git.commit({
+      fs,
+      dir: process.cwd(),
+      author: {
+        name: 'Leanweb',
+        email: 'leanweb@leanweb.app',
+      },
+      message: 'lw init'
+    });
+    console.log('\nSome useful commands:');
+    console.log('"lw s" to start the dev server.');
+    console.log('"lw di" to build for production. The output will be in dist/ directory.');
+    console.log('"lw g my-new-component" to generate a new standard web component.');
+    console.log('"lw h" to get more help information.');
+  }
 })();

package/commands/serve.js

@@ -1,17 +1,17 @@
+import { createRequire } from "module";
+const require = createRequire(import.meta.url);
+
 import fs from 'fs';
 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 liveServer from 'live-server';
 
-import { createRequire } from "module";
-const require = createRequire(import.meta.url);
 
 let env = '';
 const args = process.argv;
 if (args.length >= 3) {
-   env = args[2];
+  env = args[2];
 }
 
 const host = process.env.host || '127.0.0.1';
@@ -20,62 +20,41 @@ const noopen = process.env.noopen || false;
 
 (async () => {
 
-   const project = require(`${process.cwd()}/${utils.dirs.src}/leanweb.json`);
-
-   const build = async (eventType, filename) => {
-      // console.log(eventType + ': ', filename);
-      try {
-         await utils.exec(`npx leanweb build ${env}`);
-         fse.copySync(`./${utils.dirs.build}/index.html`, `./${utils.dirs.serve}/index.html`);
-         fse.copySync(`./${utils.dirs.build}/${project.name}.css`, `./${utils.dirs.serve}/${project.name}.css`);
-         fse.copySync(`./${utils.dirs.build}/favicon.svg`, `./${utils.dirs.serve}/favicon.svg`);
-         project.resources?.forEach(resource => {
-            const source = `./${utils.dirs.build}/${resource}`;
-            if (fs.existsSync(source)) {
-               fse.copySync(source, `./${utils.dirs.serve}/${resource}`, { filter: utils.copySymbolLinkFilter });
-            }
-         });
-      } catch (e) {
-         console.error(e);
-      }
-   };
-
-   const throttledBuild = utils.throttle(build);
-   watch(process.cwd() + `/${utils.dirs.src}/`, { recursive: true }, (eventType, filename) => {
-      throttledBuild(eventType, filename);
-   });
-
-   build();
-
-   const webpackConfig = utils.getWebPackConfig(utils.dirs.serve, project);
-
-   const webpackDevConfig = {
-      ...webpackConfig,
-      mode: 'development',
-      // watch: true,
-      devtool: 'eval-cheap-module-source-map',
-      performance: {
-         hints: false,
-      },
-   };
-
-   const compiler = webpack(webpackDevConfig);
-
-   while (await utils.portInUse(port, host)) {
-      ++port;
-   }
-
-   const devServerOptions = {
-      ...webpackDevConfig.devServer,
-      static: {
-         directory: process.cwd() + `/${utils.dirs.serve}/`,
-         watch: true,
-      },
-      port,
-      host,
-      open: !noopen,
-   };
-   const server = new WebpackDevServer(devServerOptions, compiler);
-
-   server.start();
+  const project = require(`${process.cwd()}/${utils.dirs.src}/leanweb.json`);
+
+  const build = async (eventType, filename) => {
+    // console.log(eventType + ': ', filename);
+    try {
+      await utils.exec(`npx leanweb build ${env}`);
+      fse.copySync(`./${utils.dirs.build}/index.html`, `./${utils.dirs.serve}/index.html`);
+      fse.copySync(`./${utils.dirs.build}/${project.name}.css`, `./${utils.dirs.serve}/${project.name}.css`);
+      fse.copySync(`./${utils.dirs.build}/favicon.svg`, `./${utils.dirs.serve}/favicon.svg`);
+      project.resources?.forEach(resource => {
+        const source = `./${utils.dirs.build}/${resource}`;
+        if (fs.existsSync(source)) {
+          fse.copySync(source, `./${utils.dirs.serve}/${resource}`, { filter: utils.copySymbolLinkFilter });
+        }
+      });
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  const throttledBuild = utils.throttle(build);
+  watch(process.cwd() + `/${utils.dirs.src}/`, { recursive: true }, (eventType, filename) => {
+    throttledBuild(eventType, filename);
+  });
+
+  build();
+
+  const params = {
+    port,
+    host,
+    root: utils.dirs.build,
+    open: !noopen,
+    file: 'index.html',
+    wait: 1000,
+    logLevel: 0,
+  };
+  liveServer.start(params);
 })();

package/commands/upgrade.js

@@ -1,61 +1,32 @@
-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);
 
+import fs from 'fs';
+import fse from 'fs-extra';
+import semver from 'semver';
+import * as utils from './utils.js';
+
 const leanwebPackageJSON = require(`${__dirname}/../package.json`);
 const projectLeanwebJSON = require(`${process.cwd()}/${utils.dirs.src}/leanweb.json`);
 
-const upgradeTo045 = () => {
-   const projectName = projectLeanwebJSON.name;
-   projectLeanwebJSON.components.forEach(cmp => {
-      const component = projectName + '-' + cmp;
-
-      const filePath = process.cwd() + `/${utils.dirs.src}/components/` + cmp + '/' + cmp + '.js';
-      const oldSrc = fs.readFileSync(filePath, 'utf8');
-      const newSrc = oldSrc.replace(/import\s+interpolation\s+from\s+\'.\/ast\.js\';/, 'import ast from \'./ast.js\';')
-         .replace(/const\s+component\s+=\s+{\s+id\:\s+'.+?',\s+interpolation\s+};/, '')
-         .replace(/component\.id/g, '\'' + component + '\'')
-         .replace(/super\(component\);/, 'super(ast);');
-      fs.writeFileSync(filePath, newSrc);
-   });
-};
-
-const upgradeTo081 = () => {
-   fse.copySync(`${__dirname}/../templates/env`, `./${utils.dirs.src}/env/`);
-   fse.copySync(`${__dirname}/../templates/env.js`, `./${utils.dirs.src}/env.js`);
-};
-
 const upgradeTo088 = () => {
-   utils.exec(`npm i -D @babel/runtime --loglevel=error`);
+  utils.exec(`npm i -D @babel/runtime --loglevel=error`);
 };
 
 const upgradeAvailable = semver.gt(leanwebPackageJSON.version, projectLeanwebJSON.version);
 if (upgradeAvailable) {
-   fse.copySync(`${__dirname}/../templates/lib`, `./${utils.dirs.src}/lib/`, { dereference: true });
-   const oldVersion = projectLeanwebJSON.version;
-   projectLeanwebJSON.version = leanwebPackageJSON.version;
-   fs.writeFileSync(`${process.cwd()}/${utils.dirs.src}/leanweb.json`, JSON.stringify(projectLeanwebJSON, null, 2));
-
-   if (semver.gte(leanwebPackageJSON.version, '0.4.5') && semver.lt(oldVersion, '0.4.5')) {
-      upgradeTo045();
-   }
-
-   if (semver.gte(leanwebPackageJSON.version, '0.8.1') && semver.lt(oldVersion, '0.8.1')) {
-      upgradeTo081();
-   }
+  fse.copySync(`${__dirname}/../templates/lib`, `./${utils.dirs.src}/lib/`, { dereference: true });
+  const oldVersion = projectLeanwebJSON.version;
+  projectLeanwebJSON.version = leanwebPackageJSON.version;
+  fs.writeFileSync(`${process.cwd()}/${utils.dirs.src}/leanweb.json`, JSON.stringify(projectLeanwebJSON, null, 2));
 
-   if (semver.gte(leanwebPackageJSON.version, '0.8.8') && semver.lt(oldVersion, '0.8.8')) {
-      upgradeTo088();
-   }
+  if (semver.gte(leanwebPackageJSON.version, '0.8.8') && semver.lt(oldVersion, '0.8.8')) {
+    upgradeTo088();
+  }
 
-   console.log('Leanweb upgraded:', oldVersion, '=>', leanwebPackageJSON.version);
+  console.log('Leanweb upgraded:', oldVersion, '=>', leanwebPackageJSON.version);
 }

package/commands/utils.js

@@ -1,139 +1,76 @@
-// 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',
-   dist: 'dist',
-   electron: 'electron',
+  src: 'src',
+  build: 'build',
+  serve: 'serve',
+  dist: 'dist',
 };
 
 export const copySymbolLinkFilter = (src, dest) => {
-   const destStats = fse.existsSync(dest) && fse.lstatSync(dest);
-   return !destStats?.isSymbolicLink?.();
+  const destStats = fse.existsSync(dest) && fse.lstatSync(dest);
+  return !destStats?.isSymbolicLink?.();
 };
 
 export const exec = command => execSync(command, { encoding: 'utf8', stdio: 'inherit' });
 
 export const buildCSS = (scssString, ...currentPaths) => {
-   if (scssString.trim()) {
-      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 '';
+  if (scssString.trim()) {
+    const loadPaths = [...currentPaths, path.resolve(process.cwd(), dirs.build)];
+    const cssResult = sass.compileString(scssString, { loadPaths });
+    return cssResult.css.toString().trim();
+  }
+  return '';
 };
 
 export const getComponentName = cmp => {
-   const indexOfLastSlash = cmp.lastIndexOf('/');
-   if (indexOfLastSlash > -1) {
-      return cmp.substring(indexOfLastSlash + 1);
-   }
-   return cmp;
+  const indexOfLastSlash = cmp.lastIndexOf('/');
+  if (indexOfLastSlash > -1) {
+    return cmp.substring(indexOfLastSlash + 1);
+  }
+  return cmp;
 };
 
 export const getPathLevels = filePath => {
-   filePath = path.normalize(filePath);
-   const numSlashes = filePath.replace(/[^\/]/g, '').length;
-   let ret = '';
-   for (let i = 0; i < numSlashes; ++i) {
-      ret += '../';
-   }
-   return ret;
+  filePath = path.normalize(filePath);
+  const numSlashes = filePath.replace(/[^\/]/g, '').length;
+  let ret = '';
+  for (let i = 0; i < numSlashes; ++i) {
+    ret += '../';
+  }
+  return ret;
 };
 
 export const throttle = (callback, limit = 100) => {
-   let wait = false;
-   return function () {
-      if (!wait) {
-         wait = true;
-         setTimeout(() => {
-            wait = false;
-            callback.apply(null, arguments);
-         }, limit);
-      }
-   };
-};
-
-export const 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|css)$/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
-            ],
-         }]
-      },
-   }
+  let wait = false;
+  return function () {
+    if (!wait) {
+      wait = true;
+      setTimeout(() => {
+        wait = false;
+        callback.apply(null, arguments);
+      }, limit);
+    }
+  };
 };
 
 export const 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);
-      });
-   });
+  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);
+    });
+  });
 };
 
 const initNote = `Usage: leanweb init or leanweb init project-name
@@ -216,10 +153,6 @@ 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.
@@ -236,15 +169,14 @@ const versionNote = `Usage: leanweb version
 Print version information for leanweb.`;
 
 export const 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 },
+  '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 },
+  'destroy': { file: 'destroy.js', note: destroyNote },
+  'help': { file: 'help.js', note: helpNote },
+  'version': { file: 'version.js', note: versionNote },
 };

package/commands/version.js

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