From 9d2523f113a1dfb6b591fd68cf0a19baae4df47e Mon Sep 17 00:00:00 2001 From: Anthony Rey Date: Thu, 2 Jan 2025 10:30:42 +0100 Subject: [PATCH] Add preview mode and don't fail on interruption --- .github/workflows/main.yml | 2 ++ README.md | 10 +++++++++- package-lock.json | 34 +++++++++++++++++++++++++--------- package.json | 8 ++++++-- src/preview.ts | 13 +++++++++++++ src/tikui-core.ts | 31 ++++++++++++++++++++++++------- testing-tikui/.gitignore | 1 + 7 files changed, 80 insertions(+), 19 deletions(-) create mode 100644 src/preview.ts diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index 6c8017b..ff2a64e 100644 --- a/.github/workflows/main.yml +++ b/.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: diff --git a/README.md b/README.md index 4b2a063..187f7f4 100644 --- a/README.md +++ b/README.md @@ -50,6 +50,14 @@ Then you can add other tests to make a new feature and when all your feature tes If you want to check the served generated Tikui is correct, please launch: ```shell -npm run component:open +npm run component-test:open ``` + Then you can add new [Cypress](https://www.cypress.io/) scenarios and tests. + +It's also possible to launch Component Tests in preview mode using: + +```shell +npm run component-test:build +npm run component-test:preview:open +``` diff --git a/package-lock.json b/package-lock.json index 60c6049..c68364d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,16 +1,16 @@ { "name": "@tikui/core", - "version": "6.2.3", + "version": "6.3.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@tikui/core", - "version": "6.2.3", + "version": "6.3.0", "license": "MIT", "dependencies": { "@johnsoncodehk/html2pug": "1.0.0", - "commander": "12.1.0", + "commander": "13.0.0", "concurrently": "9.1.2", "cors": "2.8.5", "escape-html": "1.0.3", @@ -2662,9 +2662,10 @@ } }, "node_modules/commander": { - "version": "12.1.0", - "resolved": "https://registry.npmjs.org/commander/-/commander-12.1.0.tgz", - "integrity": "sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==", + "version": "13.0.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-13.0.0.tgz", + "integrity": "sha512-oPYleIY8wmTVzkvQq10AEok6YcTC4sRUBl8F9gVuwchGVUCTbl/vhLTaQqutuuySYOsu8YTgV+OxKc/8Yvx+mQ==", + "license": "MIT", "engines": { "node": ">=18" } @@ -2687,6 +2688,7 @@ "version": "9.1.2", "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-9.1.2.tgz", "integrity": "sha512-H9MWcoPsYddwbOGM6difjVwVZHl63nwMEwDJG/L7VGtuaJhb12h2caPG2tVPWs7emuYix252iGfqOyrz1GczTQ==", + "license": "MIT", "dependencies": { "chalk": "^4.1.2", "lodash": "^4.17.21", @@ -6400,6 +6402,15 @@ "reload": "bin/reload" } }, + "node_modules/reload/node_modules/commander": { + "version": "12.1.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-12.1.0.tgz", + "integrity": "sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==", + "license": "MIT", + "engines": { + "node": ">=18" + } + }, "node_modules/reload/node_modules/debug": { "version": "2.6.9", "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", @@ -9830,9 +9841,9 @@ } }, "commander": { - "version": "12.1.0", - "resolved": "https://registry.npmjs.org/commander/-/commander-12.1.0.tgz", - "integrity": "sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==" + "version": "13.0.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-13.0.0.tgz", + "integrity": "sha512-oPYleIY8wmTVzkvQq10AEok6YcTC4sRUBl8F9gVuwchGVUCTbl/vhLTaQqutuuySYOsu8YTgV+OxKc/8Yvx+mQ==" }, "common-tags": { "version": "1.8.2", @@ -12627,6 +12638,11 @@ "ws": "~8.18.0" }, "dependencies": { + "commander": { + "version": "12.1.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-12.1.0.tgz", + "integrity": "sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==" + }, "debug": { "version": "2.6.9", "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", diff --git a/package.json b/package.json index a4c2c12..7766264 100644 --- a/package.json +++ b/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.2", "cors": "2.8.5", "escape-html": "1.0.3", diff --git a/src/preview.ts b/src/preview.ts new file mode 100644 index 0000000..3b77357 --- /dev/null +++ b/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}/`)); diff --git a/src/tikui-core.ts b/src/tikui-core.ts index 8d5dc33..f98007d 100644 --- a/src/tikui-core.ts +++ b/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); diff --git a/testing-tikui/.gitignore b/testing-tikui/.gitignore index 0a2b1e4..5ad0467 100644 --- a/testing-tikui/.gitignore +++ b/testing-tikui/.gitignore @@ -1 +1,2 @@ /.tikui-cache/ +/dist/