create-lupine 1.0.0

package/templates/common/dev/dev-watch.js

@@ -0,0 +1,422 @@
+// esbuild command tools
+
+const esbuild = require('esbuild');
+const path = require('path');
+const fs = require('fs/promises');
+const {
+  runCmd,
+  copyFolder,
+  sendRequest,
+  loadEnv,
+  readJson,
+  pathExists,
+  cpIndexHtml,
+  pluginIfelse,
+  markdownProcessOnEnd,
+} = require('lupine.api/dev');
+
+const triggerHandle = {
+  restart: null,
+  refresh: null,
+};
+
+// restart server for server code changes
+const triggerReStartServer = async (isDev, npmCmd, httpPort) => {
+  if (triggerHandle.restart) {
+    clearTimeout(triggerHandle.restart);
+  }
+  triggerHandle.restart = setTimeout(async () => {
+    const url = `http://127.0.0.1:${httpPort}/debug/shutdown`;
+    await sendRequest(url, isDev ? 2 : 0);
+    console.log('[dev-server] ReStart Server: ', url);
+    isDev && runCmd(npmCmd);
+  }, 500);
+};
+
+// refresh server for client code changes
+const triggerRefreshServer = async (isDev, httpPort) => {
+  if (triggerHandle.refresh) {
+    clearTimeout(triggerHandle.refresh);
+  }
+  triggerHandle.refresh = setTimeout(async () => {
+    const url = `http://127.0.0.1:${httpPort}/debug/refresh`;
+    await sendRequest(url, isDev ? 2 : 0);
+    console.log('[dev-server] Refresh Server: ', url);
+  }, 500);
+};
+
+// watch server code changes
+const watchServerPlugin = (isDev, npmCmd, httpPort) => {
+  return {
+    name: 'watchServerPlugin',
+    setup(build) {
+      build.onEnd(async (res) => {
+        // console.log(`Build meta data: `, res);
+        console.log(`[dev-server] Build finished`);
+        if (isDev) {
+          await triggerReStartServer(isDev, npmCmd, httpPort);
+        }
+      });
+    },
+  };
+};
+
+// javascript-obfuscator is needed
+const obfuscatePlugin = (isObfuscate, entryPoints = [], skipPaths = []) => {
+  if (!isObfuscate) return { name: 'obfuscatePlugin', setup() {} };
+
+  const JavaScriptObfuscator = require('javascript-obfuscator');
+  return {
+    name: 'obfuscatePlugin',
+    setup(build) {
+      build.onLoad({ filter: /\.(js|ts|tsx|jsx)$/ }, async (args) => {
+        if (args.path.includes('node_modules')) return null;
+        if (skipPaths.some((skipPath) => args.path.includes(skipPath))) {
+          console.log(`[dev-server] Skip obfuscate: ${args.path}`);
+          return null;
+        }
+
+        const ext = path.extname(args.path);
+        console.log(`[dev-server] Obfuscate: ${args.path}`);
+        let content = await fs.readFile(args.path, 'utf8');
+
+        // Transpile TS/JSX to JS first because obfuscator works on JS
+        if (['.ts', '.tsx', '.jsx'].includes(ext)) {
+          const result = await esbuild.transform(content, {
+            loader: ext.substring(1),
+            sourcefile: args.path,
+            jsx: 'automatic',
+            jsxImportSource: 'lupine.web',
+          });
+          content = result.code;
+        }
+
+        const obfuscationResult = JavaScriptObfuscator.obfuscate(content, {
+          compact: true,
+          controlFlowFlattening: true,
+          controlFlowFlatteningThreshold: 0.75,
+          deadCodeInjection: false,
+          deadCodeInjectionThreshold: 0,
+          // debugProtection: isEntryPoint, // this should be done in code: disableDebug('xxx');
+          debugProtectionInterval: 2000,
+          // disableConsoleOutput: isEntryPoint, // this should be done in code: disableConsole();
+          identifierNamesGenerator: 'hexadecimal',
+          stringArray: true,
+          stringArrayThreshold: 0.75,
+          ignoreImports: true,
+        });
+
+        return {
+          contents: obfuscationResult.getObfuscatedCode(),
+          loader: 'js',
+        };
+      });
+    },
+  };
+};
+
+// watch server code changes
+const watchAppLoader = async (isDev, npmCmd, httpPort, serverRootPath) => {
+  const cmd = isDev ? esbuild.context : esbuild.build;
+  const ctx = await cmd({
+    entryPoints: ['apps/server/src/app-loader.ts'],
+    // outdir: path.join(serverRootPath, 'server'),
+    outfile: path.join(serverRootPath, 'server', 'app-loader.js'),
+    platform: 'node',
+    sourcemap: !!isDev,
+    format: 'cjs',
+    bundle: true,
+    treeShaking: true,
+    metafile: true,
+    minify: !isDev,
+    plugins: [watchServerPlugin(isDev, npmCmd, httpPort)],
+  });
+
+  isDev && (await ctx.watch());
+  isDev && console.log('[dev-server] Watching...');
+};
+
+// watch server code changes
+const watchServer = async (isDev, npmCmd, httpPort, serverRootPath) => {
+  const cmd = isDev ? esbuild.context : esbuild.build;
+  const ctx = await cmd({
+    entryPoints: ['apps/server/src/index.ts'],
+    outdir: path.join(serverRootPath, 'server'),
+    platform: 'node',
+    sourcemap: !!isDev,
+    format: 'cjs',
+    bundle: true,
+    treeShaking: true,
+    metafile: true,
+    external: ['better-sqlite3', 'nodemailer', 'pdfkit', 'sharp'],
+    minify: !isDev,
+    plugins: [watchServerPlugin(isDev, npmCmd, httpPort)],
+  });
+
+  isDev && (await ctx.watch());
+  isDev && console.log('[dev-server] Watching...');
+};
+
+// copy files to output directory
+const copyCache = new Map();
+const clientProcessOnEnd = async (saved) => {
+  saved.indexHtml &&
+    cpIndexHtml(
+      saved.indexHtml,
+      path.join(saved.outdir, 'index.html'),
+      saved.appName,
+      saved.isMobile,
+      saved.defaultThemeName,
+      saved.outdirData,
+      saved.outdirSub
+    );
+
+  const assets = saved['copyFiles'];
+  if (assets) {
+    for (oneDir of assets) {
+      await copyFolder(copyCache, oneDir.from, oneDir.to, saved.isDev);
+    }
+  }
+
+  if (saved.isDev) {
+    await triggerRefreshServer(saved.isDev, saved.httpPort);
+  }
+};
+
+// watch client code changes
+const watchClientPlugin = (saved) => {
+  return {
+    name: 'watchClientPlugin',
+    setup(build) {
+      build.onEnd(async (res) => {
+        // console.log(`Build meta data: `, res);
+        console.log(`[dev-client:${saved.appName}] Build finished`);
+        await clientProcessOnEnd(saved);
+      });
+    },
+  };
+};
+
+// plugin for conditional code logic
+/*
+#if MOBILE && DEV
+console.log('this is mobile and dev');
+#endif
+*/
+const ifPluginVars = {
+  MOBILE: '',
+  DEV: '',
+};
+const watchClient = async (saved, isDev, entryPoints, outbase) => {
+  const cmd = isDev ? esbuild.context : esbuild.build;
+  const ctx = await cmd({
+    entryPoints,
+    outdir: saved.outdir,
+    outbase,
+    // entryNames: '[name]-[hash]',
+    platform: 'browser',
+    sourcemap: !!isDev, // inline
+    format: 'iife',
+    bundle: true,
+    treeShaking: true,
+    external: [],
+    metafile: true,
+    minify: !isDev,
+    loader: { '.svg': 'text', '.glsl': 'text', '.png': 'file', '.gif': 'file', '.html': 'text' },
+    assetNames: '/pub_assets/[name]-[hash]',
+    publicPath: saved.outdirSub,
+    jsxImportSource: 'lupine.web',
+    jsx: 'automatic',
+    target: ['chrome87'],
+    plugins: [
+      watchClientPlugin(saved),
+      pluginIfelse(ifPluginVars),
+      obfuscatePlugin(saved.isObfuscate, entryPoints, []),
+    ],
+  });
+
+  isDev && (await ctx.watch());
+  isDev && console.log(`[dev-client:${saved.appName}] Watching...`);
+};
+
+const watchApiPlugin = (isDev, httpPort) => {
+  return {
+    name: 'watchApiPlugin',
+    setup(build) {
+      build.onEnd(async (res) => {
+        console.log(`[dev-api] Build finished`);
+
+        if (isDev) {
+          await triggerRefreshServer(isDev, httpPort);
+        }
+      });
+    },
+  };
+};
+
+const watchApi = async (saved, isDev, entryPoints) => {
+  const cmd = isDev ? esbuild.context : esbuild.build;
+  const ctx = await cmd({
+    entryPoints,
+    outdir: saved.outdirApi,
+    // outbase,
+    platform: 'node',
+    sourcemap: !!isDev, // inline
+    format: 'cjs', // iife, cjs
+    bundle: true,
+    treeShaking: true,
+    metafile: true,
+    external: ['better-sqlite3', 'nodemailer', 'pdfkit', 'sharp'],
+    minify: !isDev,
+    plugins: [watchApiPlugin(isDev, saved.httpPort)],
+  });
+
+  isDev && (await ctx.watch());
+  isDev && console.log(`[dev-api:${saved.appName}] Watching...`);
+};
+
+const watchMarkdownPlugin = (saved) => {
+  return {
+    name: 'watchMarkdownPlugin',
+    setup(build) {
+      build.onEnd(async (res) => {
+        // console.log(`Build meta data: `, res);
+        console.log(`[dev-markdown:${saved.appName}] Build finished`);
+        await markdownProcessOnEnd(saved.markdownEntryPoints.indir, saved.markdownEntryPoints.outdir);
+      });
+    },
+  };
+};
+
+const watchMarkdown = async (saved, entryPoints) => {
+  const cmd = saved.isDev ? esbuild.context : esbuild.build;
+  const ctx = await cmd({
+    entryPoints: [`${entryPoints.indir}/**/*.md`],
+    outdir: entryPoints.outdir,
+    write: false,
+    loader: { '.md': 'empty' },
+    plugins: [watchMarkdownPlugin({ ...saved, markdownEntryPoints: entryPoints })],
+  });
+
+  saved.isDev && (await ctx.watch());
+};
+
+const watchAdditionalFiles = async (saved, entryPoints) => {
+  const cmd = saved.isDev ? esbuild.context : esbuild.build;
+  const ctx = await cmd({
+    entryPoints: entryPoints,
+    outdir: 'dist/tmp',
+    write: false,
+    loader: { '.html': 'empty', '.css': 'empty', '.js': 'empty', '.md': 'empty' },
+    plugins: [watchClientPlugin(saved)],
+  });
+
+  saved.isDev && (await ctx.watch());
+};
+
+// Add Server, API, Client and additional files entry points to esbuild
+const start = async () => {
+  // Any code accessing process.env should be after loadEnv
+  // process env files, "#!import .env" in .env file can be used to include another env file
+  let envFile = process.argv.find((i) => i.startsWith('--env='))?.substring(6);
+  // load env file, but don't overwrite existing env variables
+  await loadEnv(envFile);
+
+  const serverRootPathEnv = process.env['SERVER_ROOT_PATH'];
+  if (!serverRootPathEnv) {
+    console.error('SERVER_ROOT_PATH is not set');
+    return 0;
+  }
+  const serverRootPath = path.resolve(serverRootPathEnv);
+  await fs.mkdir(serverRootPath, { recursive: true });
+  if (!(await pathExists(serverRootPath))) {
+    console.error(`Can't create server root path: ${serverRootPath}`);
+    return 0;
+  }
+
+  // command to start the server when source files are changed
+  const npmCmd = process.argv.find((i) => i.startsWith('--cmd='))?.substring(6);
+  const isDev = process.argv.find((i) => i === '--dev=1');
+  const isMobile = process.argv.find((i) => i === '--mobile=1'); // when this changed, need to rebuild index.html
+  const isObfuscate = !isDev && process.argv.find((i) => i === '--obfuscate=1');
+  // this is for esbuild conditional compile
+  ifPluginVars.DEV = isDev ? '1' : '0';
+  ifPluginVars.MOBILE = isMobile ? '1' : '0';
+
+  // All apps should be defined in .env file like this:
+  // APPS=domain1.com,domain2.com
+  const apps = (process.env['APPS'] || '').split(',');
+
+  const httpPort = process.env['HTTP_PORT'];
+  for (const app of apps) {
+    const appJson = `apps/${app}/lupine.json`;
+    const additionalFiles = [];
+    const appCfg = await readJson(appJson);
+    const appName = appCfg['name'];
+    const appDir = path.dirname(appJson);
+    if (appCfg['watchFiles']) {
+      appCfg['watchFiles'].forEach((item) => additionalFiles.push(`${appDir}/${item}`));
+    }
+
+    // create data folder
+    await fs.mkdir(`${serverRootPath}/${appName}_data`, { recursive: true });
+
+    const saved = {
+      isDev,
+      isMobile,
+      isObfuscate,
+      defaultThemeName: 'light',
+      appName,
+      httpPort,
+      serverRoot: serverRootPath,
+      outdirWeb: `${serverRootPath}/${appName}_web`,
+      outdirApi: `${serverRootPath}/${appName}_api`,
+      outdirData: `${serverRootPath}/${appName}_data`,
+      copyFiles: appCfg['copyFiles'].map((item) => ({
+        from: `${appDir}/${item.from}`,
+        to:
+          item.type == 'data'
+            ? `${serverRootPath}/${appName}_data/${item.to}`
+            : `${serverRootPath}/${appName}_web/${item.to}`,
+      })),
+    };
+
+    appCfg['webEntryPoints'].forEach((item, index) => {
+      const entryPoint = `${appDir}/${item.index}`;
+      const indexHtml = `${appDir}/${item.html}`;
+      watchClient(
+        {
+          ...saved,
+          outdirSub: item.outdir,
+          outdir: `${serverRootPath}/${appName}_web/` + item.outdir,
+          indexHtml,
+          copyFiles: [],
+        },
+        isDev,
+        [entryPoint],
+        path.dirname(entryPoint)
+      );
+      additionalFiles.push(indexHtml);
+    });
+
+    if (appCfg['apiEntryPoint']) {
+      const entryPointApi = `${appDir}/${appCfg['apiEntryPoint']}`;
+      watchApi(saved, isDev, [entryPointApi]);
+    }
+    if (appCfg['markdownEntryPoints']) {
+      const markdownEntryPoints = {
+        indir: `${appDir}/${appCfg['markdownEntryPoints'].indir}`,
+        outdir: `${appDir}/${appCfg['markdownEntryPoints'].outdir}`,
+      };
+      watchMarkdown(saved, markdownEntryPoints);
+    }
+    if (additionalFiles.length > 0) {
+      // when some resources are changed, need to run command or refresh the server
+      watchAdditionalFiles(saved, additionalFiles);
+    }
+  }
+
+  watchServer(isDev, npmCmd, httpPort, serverRootPath);
+  watchAppLoader(isDev, npmCmd, httpPort, serverRootPath);
+};
+start();

package/templates/doc-starter/api/resources/config_default.json

@@ -0,0 +1,6 @@
+{
+  "WEB.pageLimit": "15",
+  "WEB.siteTitle": "Sample title",
+  "WEB.siteEmail": "sample@sample.com",
+  "WEB.siteUrl": "https://sample.com"
+}

package/templates/doc-starter/api/resources/install.sqlite.sql

@@ -0,0 +1,4 @@
+#-- sql queries to create tables
+#-- Never name a table with plural (such as "users")
+#-- Never name a table using a reserved keyword (such as "user")
+#-- Never prefix your table name with "tbl" or some other object type prefix

package/templates/doc-starter/api/src/index.ts

@@ -0,0 +1,15 @@
+import { IApiBase, ApiRouter, StaticServer, ApiModule } from 'lupine.api';
+
+class DocApi implements IApiBase {
+  protected router = new ApiRouter();
+
+  constructor() {
+    this.router.use('*', new StaticServer().processRequest.bind(new StaticServer()));
+  }
+
+  public getRouter(): ApiRouter {
+    return this.router;
+  }
+}
+
+export const apiModule = new ApiModule(new DocApi());

package/templates/doc-starter/api/src/resources/config_default.json

@@ -0,0 +1,6 @@
+{
+  "WEB.pageLimit": "15",
+  "WEB.siteTitle": "Sample title",
+  "WEB.siteEmail": "sample@sample.com",
+  "WEB.siteUrl": "https://sample.com"
+}

package/templates/doc-starter/api/src/resources/install.sqlite.sql

@@ -0,0 +1,4 @@
+#-- sql queries to create tables
+#-- Never name a table with plural (such as "users")
+#-- Never name a table using a reserved keyword (such as "user")
+#-- Never prefix your table name with "tbl" or some other object type prefix

package/templates/doc-starter/lupine.json

@@ -0,0 +1,33 @@
+{
+  "name": "doc-starter",
+  "markdownEntryPoints": {
+    "indir": "web/markdown",
+    "outdir": "web/src/markdown-built"
+  },
+  "webEntryPoints": [
+    {
+      "index": "web/src/index.tsx",
+      "html": "web/src/index.html",
+      "outdir": "/"
+    },
+    {
+      "index": "web/github-pj-name/index.tsx",
+      "html": "web/github-pj-name/index.html",
+      "outdir": "/github-pj-name"
+    }
+  ],
+  "apiEntryPoint": "api/src/index.ts",
+  "watchFiles": ["web/markdown/**/*.md"],
+  "copyFiles": [
+    {
+      "type": "web",
+      "from": "web/assets",
+      "to": "assets"
+    },
+    {
+      "type": "data",
+      "from": "api/resources",
+      "to": "resources"
+    }
+  ]
+}

package/templates/doc-starter/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "doc-starter",
+  "version": "1.0.0",
+  "description": "Documentation starter demo project",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "echo 'run build at project root directory'"
+  },
+  "dependencies": {
+    "lupine.press": "^1.0.1"
+  }
+}

package/templates/doc-starter/web/assets/site.webmanifest

@@ -0,0 +1,14 @@
+{
+    "name": "",
+    "short_name": "",
+    "icons": [
+       {
+          "src": "/assets/android-chrome-192x192.png",
+          "sizes": "192x192",
+          "type": "image/png"
+       }
+    ],
+    "theme_color": "#FFFFFF",
+    "background_color": "#FFFFFF",
+    "display": "standalone"
+ }

package/templates/doc-starter/web/github-pj-name/index.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html data-theme="<!--META-THEME-->">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="manifest" href="{SUBDIR}/assets/site.webmanifest" />
+    <title><!--META-TITLE--></title>
+    <link rel="apple-touch-icon" sizes="180x180" href="{SUBDIR}/assets/apple-touch-icon.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="{SUBDIR}/assets/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="{SUBDIR}/assets/favicon-16x16.png" />
+    <link rel="icon" type="image/png" sizes="192x192" href="{SUBDIR}/assets/android-chrome-192x192.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <!--META-ENV-START-->
+    <!--META-ENV-END-->
+    <link rel="shortcut icon" href="{SUBDIR}/assets/favicon.ico?t={hash}" />
+    <link rel="stylesheet" type="text/css" href="{SUBDIR}/index.css?t={hash}" />
+    <script defer src="{SUBDIR}/index.js#t={hash}"></script>
+  </head>
+  <body>
+    <div class="lupine-root"></div>
+  </body>
+</html>

package/templates/doc-starter/web/github-pj-name/index.tsx

@@ -0,0 +1,35 @@
+import {
+  bindRouter,
+  PageRouter,
+  bindTheme,
+  bindLang,
+  setDefaultPageTitle,
+  isFrontEnd,
+  debugWatch,
+  webEnv,
+  setDefaultMetaDescription,
+  bindGlobalStyle,
+} from 'lupine.components';
+import { bindPressData, PressPage, pressThemes, setPressSubDir } from 'lupine.press';
+import { ClientEnvKeys } from '../src/client-env-keys';
+import { baseCss } from '../src/styles/base-css';
+import { markdownConfig } from '../src/markdown-built/markdown-config';
+
+if (isFrontEnd() && webEnv(ClientEnvKeys.NODE_ENV, '') === 'development') {
+  debugWatch(webEnv(ClientEnvKeys.API_PORT, 0));
+}
+
+bindLang('en', {});
+bindTheme('light', pressThemes);
+bindGlobalStyle('comm-css', baseCss, false, true);
+setDefaultPageTitle('Doc Starter');
+setDefaultMetaDescription('Doc Starter Demo');
+
+bindPressData(markdownConfig);
+setPressSubDir('/github-pj-name');
+
+const pageRouter = new PageRouter();
+pageRouter.setSubDir('/github-pj-name');
+pageRouter.use('*', PressPage);
+
+bindRouter(pageRouter);

package/templates/doc-starter/web/markdown/en/essentials/index.md

@@ -0,0 +1,6 @@
+---
+title: Core Essentials
+sidebar:
+  - items:
+      - /en/essentials/list
+---

package/templates/doc-starter/web/markdown/en/essentials/list.md

@@ -0,0 +1,18 @@
+---
+title: Essentials List
+---
+
+> [!NOTE]
+> This is a demo document.
+
+# Essentials List
+
+This is a simplified essentials list doc for demo purposes.
+
+## Feature Overview
+
+Here is an example listing key features:
+
+```tsx
+const features = ['Fast', 'Reliable', 'Easy to use'];
+```

package/templates/doc-starter/web/markdown/en/guide/install.md

@@ -0,0 +1,18 @@
+---
+title: Installation
+---
+
+> [!NOTE]
+> This is a demo document.
+
+# Installation
+
+This is a simplified installation guide for demo purposes.
+
+## Basic Install
+
+Run the following command:
+
+```bash
+npm install my-project
+```

package/templates/doc-starter/web/markdown/en/guide/started.md

@@ -0,0 +1,22 @@
+---
+title: Getting Started
+---
+
+> [!NOTE]
+> This is a demo document.
+
+# Getting Started
+
+This is a simplified getting started guide for demo purposes.
+
+## Quick Start
+
+Initialize your project:
+
+```javascript
+import { init } from 'my-project';
+
+init({
+  debug: true,
+});
+```