Add preview mode and don't fail on interruption

.github/workflows/main.yml

@@ -32,6 +32,8 @@ jobs:
           npm run build
           npm test
           npm run component-test:ci
+          npm run component-test:build
+          npm run component-test:preview:ci
         env:
           CI: true
   build-windows:

package.json

@@ -1,16 +1,20 @@
 {
   "name": "@tikui/core",
-  "version": "6.2.3",
+  "version": "6.3.0",
   "description": "Tikui core",
   "main": "src/tikui.js",
   "scripts": {
     "build": "npm run clean & tsc",
     "clean": "rimraf dist",
     "component-test:start": "TIKUI_PATH='testing-tikui' node dist/tikui-core.js serve",
+    "component-test:build": "TIKUI_PATH='testing-tikui' node dist/tikui-core.js build",
+    "component-test:preview": "TIKUI_PATH='testing-tikui' node dist/tikui-core.js preview",
     "component-test:cypress": "cypress run",
     "component-test:cypress:open": "cypress open",
     "component-test:ci": "start-server-and-test component-test:start http://localhost:3005 component-test:cypress",
+    "component-test:preview:ci": "start-server-and-test component-test:preview http://localhost:3005 component-test:cypress",
     "component-test:open": "start-server-and-test component-test:start http://localhost:3005 component-test:cypress:open",
+    "component-test:preview:open": "start-server-and-test component-test:preview http://localhost:3005 component-test:cypress:open",
     "test": "jest --collectCoverage --detectOpenHandles"
   },
   "files": [
@@ -36,7 +40,7 @@
   "dependencies": {
     "@johnsoncodehk/html2pug": "1.0.0",
     "reload": "3.3.0",
-    "commander": "12.1.0",
+    "commander": "13.0.0",
     "concurrently": "9.1.1",
     "cors": "2.8.5",
     "escape-html": "1.0.3",

src/preview.ts

@@ -0,0 +1,13 @@
+import express from 'express';
+import cors from 'cors';
+import {port, projectDist} from './tikui-loader';
+
+const app = express();
+
+app.use(cors());
+
+// Serve dist directory
+app.use('/', express.static(projectDist));
+
+// Create server
+app.listen(port, () => console.log(`Styles are available at http://localhost:${port}/`));

src/tikui-core.ts

@@ -14,16 +14,29 @@ const EXPRESS_SERVE = `node "${path.resolve(BUILD_DIR, 'express.js')}"`;
 const SASS_BUILD = `npx sass -I "${projectNodeModules}" "${projectSrc}":"${projectDist}" -s compressed --source-map --embed-sources`;
 const ASSETS_BUILD = `node "${path.resolve(BUILD_DIR, 'assets-build.js')}"`;
 const PUG_BUILD = `node "${path.resolve(BUILD_DIR, 'pug-build.js')}"`;
+const EXPRESS_PREVIEW = `node "${path.resolve(BUILD_DIR, 'preview.js')}"`;
 
-const serve = () => {
-  console.log('Serving, please use Ctrl-C to exit.');
-  const { result } = concurrently([
-    SASS_CACHE,
-    EXPRESS_SERVE,
-  ])
-  result.then();
+const filterInterruptionErrorFor = (subject: string) => async (errors: unknown) => {
+  if (Array.isArray(errors) && errors.every(error => error.exitCode === 'SIGINT')) {
+    console.log(`${subject} exited normally by interruption.`);
+
+    return;
+  }
+
+  console.error(`${subject} failed with following errors:`, errors);
+  process.exit(1);
 };
 
+const launchFor = (subject: string, ...commands: string[]) => async () => {
+  console.log(`${subject} in progress, please use Ctrl-C to exit.`);
+  const { result } = concurrently(commands)
+  await result.then().catch(filterInterruptionErrorFor(subject));
+}
+
+const serve = launchFor('Serve', SASS_CACHE, EXPRESS_SERVE);
+
+const preview = launchFor('Preview', EXPRESS_PREVIEW);
+
 const ordered = (...commands: string[]) => commands.join(' && ');
 
 const build = () => {
@@ -49,6 +62,10 @@ program
   .command('serve')
   .action(serve);
 
+program
+  .command('preview')
+  .action(preview);
+
 program
   .command('build')
   .action(build);

testing-tikui/.gitignore

@@ -1 +1,2 @@
 /.tikui-cache/
+/dist/