sinto 1.7.0 → 1.8.1

package/README.md

@@ -55,11 +55,12 @@ This command is generate public directory from src directory.
 * sin init - Initilalize the project
 * sin serve - Start development server
 * sin build - Start public generation
+* sin rmno - Delete node_modules directory
 * sin api - Generate fake REST API with hai-server
 * sin webpack - Generate Webpack project
 * sin pup - Generate Puppeteer test with Mocha
-* sin rmno - Delete node_modules directory
-* sin ts - Generate tsconfig.json and add dependencies
+* sin addts - Generate tsconfig.json and add dependencies
+* sin ts - Initialize TypeScript Node.js project
 * sin web - Generate HTML and empty CSS files
 * sin esbuild - Generate esbuild project
 
@@ -157,20 +158,49 @@ Write the tests in test directory and run the tests:
 npm test
 ```
 
-## TypeScript config and dependencies
+## TypeScript
+
+### TypeScript config and dependencies
 
-The **sin ts** command generate a tsconfig.json and add dependencies to package.json.
+The **sin addts** command generate a tsconfig.json and add dependencies to package.json.
 
-The **sin ts** command does not install the dependencies, it just writes them into the package.json file. Install the dependencies with the **npm i** or **pnpm i** command.
+The **sin addts** command does not install the dependencies, it just writes them into the package.json file. Install the dependencies with the **npm i** or **pnpm i** command.
 
 Using:
 
 ```cmd
 sin init
+sin addts
+npm i
+```
+
+### TypeScript Node.js project
+
+The **sin ts** command generate a TypeScript Node.js project.
+
+Using:
+
+```cmd
 sin ts
 npm i
 ```
 
+Generated directories and files:
+
+```txt
+app01/
+  |-src/
+  |  |-assets/
+  |  |-app.ts
+  |  |-index.html
+  |  `-style.css
+  |-bs-config.json
+  |-gulpfile.js  
+  |-package.json
+  |-README.md
+  `-tsconfig.json  
+```
+
 ## ESBuild project generator
 
 The sin esbuild command generate a esbuild project.

package/addts/addts.js

@@ -0,0 +1,43 @@
+const tsconfigContent = require('./tsconfigContent.js');
+const { createFile } = require('../tools/tools.js');
+const jsonfile = require('jsonfile');
+const { addDevDep } = require('../tools/dep.js');
+
+const fs = require('fs');
+
+const supplementTypescript = () => {
+    writeConfigFile();
+    showMsg();
+    addDependencies();
+}
+
+const writeConfigFile = () => {
+    const dir = process.cwd();
+    const path = `${dir}/tsconfig.json`;
+    jsonfile.writeFileSync(path, tsconfigContent, { spaces: 2 });
+}
+
+const showMsg = () => {
+    console.log(`
+Install dependencies with npm or pnpm command:
+
+pnpm install
+        `);
+}
+
+const addDependencies = () => {
+
+    const dir = process.cwd();
+    const path = `${dir}/package.json`;
+
+    if (!fs.existsSync(path)) {
+        console.log('package.json file does not exist.');
+        return;
+    }
+    
+
+
+    addDevDep(path, ['typescript']);
+}
+
+module.exports.supplementTypescript = supplementTypescript;

package/addts/tsconfigContent.js

@@ -0,0 +1,13 @@
+
+const tsconfigContent = 
+{
+    "compilerOptions": {
+        "target": "ES6",
+        "module": "ES6",
+        "outDir": "./app",
+        "strict": true,
+        "esModuleInterop": true
+    }
+}
+
+module.exports = tsconfigContent;

package/gents/contents/tsPackageContent.js

@@ -0,0 +1,29 @@
+
+const packageTsContent = 
+{
+    name: 'sinto-project',
+    version: '0.0.1',
+    description: 'A project created by the Sinto command',
+    scripts: {
+      'start': 'browser-sync start --config bs-config.json',
+      'build': 'gulp',
+      'ts': 'tsc'
+    },
+    "dependencies": {
+      "bootstrap": "^5.3.3"
+    },
+    "devDependencies": {
+      "browser-sync": "^3.0.2",
+      "gulp": "^5.0.0",
+      "gulp-clean-css": "^4.3.0",
+      "gulp-concat": "^2.6.1",
+      "gulp-image": "^6.3.1",
+      "gulp-minify": "^3.1.0",
+      "gulp-uglify": "^3.0.2",
+      "gulp-replace": "^1.1.4",
+      "gulp-typescript": "6.0.0-alpha.1"
+    },
+    "type": "module"
+}
+
+module.exports = packageTsContent;

package/gents/{tsconfigContent.js → contents/tsconfigContent.js}

@@ -3,7 +3,7 @@ const tsconfigContent =
 {
     "compilerOptions": {
         "target": "ES6",
-        "module": "commonjs",
+        "module": "ES6",
         "outDir": "./app",
         "strict": true,
         "esModuleInterop": true
@@ -11,4 +11,4 @@ const tsconfigContent =
 }
 
 
-module.exports = tsconfigContent;
+module.exports = tsconfigContent;

package/gents/generators/genTsBsconfig.js

@@ -0,0 +1,13 @@
+
+const tsBsconfigContent = 
+{
+    server: [
+        "app",
+        "node_modules/bootstrap/dist/css",
+        "node_modules/bootstrap/dist/js"
+    ],
+    port: 3000,
+    watch: true
+};
+
+module.exports = tsBsconfigContent;

package/gents/generators/genTsGulpfile.js

@@ -0,0 +1,65 @@
+
+const tsGulfileContent = `
+import {src, dest, series} from 'gulp';
+import cleanCss from 'gulp-clean-css';
+import replace from 'gulp-replace';
+import concat from 'gulp-concat'
+import ts from 'gulp-typescript';
+import uglify from 'gulp-uglify';
+import minify from 'gulp-minify';
+
+import {create as bsCreate} from 'browser-sync';
+const browserSync = bsCreate();
+ 
+function genHTML(cb) {
+    src('app/**/*.html')
+    .pipe(dest('dist'))
+    cb();
+}
+
+
+function streamTs(cb) {
+  src('src/**/*.ts')
+    .pipe(ts())
+    .pipe(uglify())
+    .pipe(dest('public'));
+  cb();
+}
+
+function minifyJS(cb) {
+  src([
+    'public/**/*.js', 
+    'node_modules/bootstrap/dist/js/bootstrap.js'
+  ])
+    .pipe(replace(/import .*/g, ''))
+    .pipe(replace(/export .*/g, ''))
+    .pipe(concat('app.js'))
+    .pipe(minify())
+    .pipe(dest('dist'));
+  cb();
+}
+
+function minifyCSS(cb) {
+  src([
+    'app/**/*.css', 
+    'node_modules/bootstrap/dist/css/bootstrap.css'])
+    .pipe(cleanCss())
+    .pipe(dest('dist'));
+  cb();
+}
+
+function copyImages(cb) {
+  src('app/assets/**/*')
+    .pipe(dest('dist/assets'));
+  cb();
+}
+
+function build(cb) {
+  series(genHTML, streamTs, minifyJS, minifyCSS, copyImages)(cb);
+}
+
+export default build
+
+`;
+
+module.exports = tsGulfileContent;

package/gents/generators/genTsWeb.js

@@ -0,0 +1,44 @@
+const {debug} = require('../../config.json');
+const fsExtra = require('fs-extra');
+
+const defaultTsGulpfileContent = require('./genTsGulpfile');
+const defaultHtmlContent = require('../../genweb/generators/genHtml');
+const defaultTsBsconfigContent = require('./genTsBsconfig');
+const defaultTsPackageContent = require('../contents/tsPackageContent');
+
+const {
+  createDirectory, 
+  createFile,
+  createGulpfileJsFile,
+  createBsconfigFile,
+  createIndexHtmlFile,
+  createPackageJsonFile
+} = require('../../tools/tools');
+
+const outputDir = 'app';
+
+const createTsWeb = () => {
+  const dir = process.cwd();
+
+  createDirectory(`${dir}/src`);
+  createDirectory(`${dir}/${outputDir}`);
+  createDirectory(`${dir}/${outputDir}/assets`);
+
+  createFile(`${dir}/${outputDir}/style.css`, '');
+  
+  createFile(`${dir}/src/app.ts`, '');
+    
+  createFile(`${dir}/README.md`, '# Sinto Project');
+  
+  createPackageJsonFile(dir, defaultTsPackageContent);
+  createIndexHtmlFile(dir, outputDir, defaultHtmlContent);
+  createGulpfileJsFile(dir, defaultTsGulpfileContent);    
+  createBsconfigFile(dir, defaultTsBsconfigContent);
+
+
+  console.log('Base directories and files created.');
+};
+
+
+
+module.exports.createTsWeb = createTsWeb

package/gents/gents.js

@@ -1,12 +1,16 @@
-const tsconfigContent = require('./tsconfigContent');
+const {debug} = require('../config.json');
+const tsconfigContent = require('./contents/tsconfigContent.js');
 const { createFile } = require('../tools/tools.js');
 const jsonfile = require('jsonfile');
-const { addDevDep } = require('../tools/dep.js');
+const { addDevDep, addScript } = require('../tools/dep.js');
+const fs = require('fs');
+const { createTsWeb } = require('./generators/genTsWeb.js');
+const defaultTsPackageContent = require('./contents/tsPackageContent.js');
 
-const supplementTypescript = () => {
-    writeConfigFile();
-    showMsg();
-    addDependencies();
+const initTypescriptProject = async () => {
+  createTsWeb();
+  writeConfigFile();
+  showMsg();
 }
 
 const writeConfigFile = () => {
@@ -16,21 +20,11 @@ const writeConfigFile = () => {
 }
 
 const showMsg = () => {
-    console.log(`
-Proposal:
-In the tsconfig.json file, leave the module value
-at commonjs for a NodeJS project. In the case of 
-an ES project, rewrite it to, for example, ES6.
+    console.log(`TypeScript project initialized.
+Install dependencies with npm or pnpm command:
 
-Install dependencies:
 pnpm install
         `);
 }
 
-const addDependencies = () => {
-    const dir = process.cwd();
-    const path = `${dir}/package.json`;
-    addDevDep(path, ['typescript']);
-}
-
-module.exports.supplementTypescript = supplementTypescript;
+module.exports.initTypescriptProject = initTypescriptProject;

package/genweb/genweb.js

@@ -1,5 +1,4 @@
 const {debug} = require('../config.json');
-const jsonfile = require('jsonfile');
 const fsExtra = require('fs-extra');
 
 const defaultPackageContent = require('../genweb/generators/genPackage');
@@ -9,58 +8,40 @@ const defaultBsconfigContent = require('../genweb/generators/genBsconfig');
 
 const {
     createDirectory, 
-    createFile
+    createFile,
+    createGulpfileJsFile,
+    createBsconfigFile,
+    createIndexHtmlFile,
+    createPackageJsonFile
   } = require('../tools/tools');
 
 const createWeb = () => {
-    const currentDirectory = process.cwd();
+    const dir = process.cwd();
   
-    createDirectory(`${currentDirectory}/src`);
-    createDirectory(`${currentDirectory}/src/assets`);
+    createDirectory(`${dir}/src`);
+    createDirectory(`${dir}/src/assets`);
   
-    createFile(`${currentDirectory}/src/style.css`, '');  
-    createFile(`${currentDirectory}/src/app.js`, '');
-    createFile(`${currentDirectory}/README.md`, '# Sinto Project');
+    createFile(`${dir}/src/style.css`, '');
+
+
+    createFile(`${dir}/src/app.js`, '');
+
+    createFile(`${dir}/README.md`, '# Sinto Project');
     
-    createPackageJsonFile(currentDirectory);
-    createIndexHtmlFile(currentDirectory);
-    createGulpfileJsFile(currentDirectory);
-    createBsconfigFile(currentDirectory);
+    createPackageJsonFile(dir, defaultPackageContent);
+    createIndexHtmlFile(dir, 'src', defaultHtmlContent);
+    createGulpfileJsFile(dir, defaultGulpfileContent);    
+    createBsconfigFile(dir, defaultBsconfigContent);
   
     console.log('Base directories and files created.');
 };
 
-const createPackageJsonFile = (directory) => {
-  const packageJsonPath = `${directory}/package.json`;
-  jsonfile.writeFileSync(packageJsonPath, defaultPackageContent, { spaces: 2 });
-  if(debug) {
-      console.log('package.json file created.');
-  }        
-}
 
-const createIndexHtmlFile = (directory) => {
-  const indexHtmlPath = `${directory}/src/index.html`;
-  fsExtra.writeFileSync(indexHtmlPath, defaultHtmlContent);
-  if(debug)
-  console.log('index.html file created');
-}
 
-const createGulpfileJsFile = (directory) => {
-  const gulpfileJsPath = `${directory}/gulpfile.js`;
-  fsExtra.writeFileSync(gulpfileJsPath, defaultGulpfileContent);
-  if(debug)
-  console.log('gulpfile.js file created.');
-}
 
-const createBsconfigFile = (directory) => {
-  const bsconfigPath = `${directory}/bs-config.json`;
-  jsonfile.writeFileSync(bsconfigPath, defaultBsconfigContent, { spaces: 2 });
-  if(debug)
-  console.log('bs-config.json file created.');
-}
+
 
 module.exports.createWeb = createWeb;
-module.exports.createPackageJsonFile = createPackageJsonFile;
-module.exports.createIndexHtmlFile = createIndexHtmlFile;
-module.exports.createGulpfileJsFile = createGulpfileJsFile;
-module.exports.createBsconfigFile = createBsconfigFile;
+// module.exports.createPackageJsonFile = createPackageJsonFile;
+// module.exports.createGulpfileJsFile = createGulpfileJsFile;
+// module.exports.createBsconfigFile = createBsconfigFile;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sinto",
-  "version": "1.7.0",
+  "version": "1.8.1",
   "description": "Website project development manager",
   "bin": {
     "sin": "sin.js"

package/sin.js

@@ -9,7 +9,8 @@ const { createApi } = require('./haiserver/apigen');
 const { createWebpack } = require('./webpack/generate');
 const { createEsbuildProject } = require('./esbuild/generate');
 const { createPuppeteerTest } = require('./gentest/generate');
-const { supplementTypescript } = require('./gents/gents');
+const { supplementTypescript } = require('./addts/addts');
+const { initTypescriptProject } = require('./gents/gents');
 const { createIndexHtmlCssFile } = require('./htmlcss/htmlcss');
 
 const program = new Command();
@@ -17,11 +18,11 @@ const program = new Command();
 program
     .name('sin')
     .description('Project handler')
-    .version('1.7.0');
+    .version('1.8.1');
 
 program
     .command('init')
-    .description('Initialize the web project')
+    .description('Initialize the Node.js web project')
     .action(() => {
         createWeb();
     });
@@ -70,12 +71,20 @@ program
     })
 
 program
-    .command('ts')
+    .command('addts')
     .description('Supplement with TypeScript')
     .action(() => {
         supplementTypescript();
     })
 
+program
+    .command('ts')
+    .description('Initialize TypeScript Node.js project')
+    .action(() => {
+        initTypescriptProject();
+    })
+
+
 program
     .command('web')
     .description('HTML és üres CSS fájl')

package/tools/dep.js

@@ -31,6 +31,7 @@ async function readJsonFile(filePath) {
 }
 
 async function addDependencies(obj, packageNames, devDep) {
+    console.log(`Adding dependencies...`);
     for(const packageName of packageNames) {
         try {
             const newDependency = await getPackageInfo(packageName);
@@ -65,7 +66,8 @@ async function writeJsonFile(path, obj) {
     try {
         await jsonfile.writeFile(path, obj, { spaces: 2});
         if(debug) {
-            console.log(`Added new depencies`);
+            console.log(`Written new JSON file: ${path}`);
+            console.log(obj);
         }
     } catch (err) {
         console.error('Error! Failed to write package.json:');

package/tools/tools.js

@@ -1,5 +1,6 @@
 const {debug} = require('../config.json');
 const fsExtra = require('fs-extra');
+const jsonfile = require('jsonfile');
 
 const createDirectory = (path) => {
     if (!fsExtra.existsSync(path)) {
@@ -13,5 +14,38 @@ const createFile = (path, content) => {
     }
 }
 
+const createGulpfileJsFile = (dir, content) => {
+    const gulpfileJsPath = `${dir}/gulpfile.js`;
+    fsExtra.writeFileSync(gulpfileJsPath, content);
+    if(debug)
+    console.log('gulpfile.js file created.');
+}
+
+const createBsconfigFile = (directory, content) => {
+    const bsconfigPath = `${directory}/bs-config.json`;
+    jsonfile.writeFileSync(bsconfigPath, content, { spaces: 2 });
+    if(debug)
+    console.log('bs-config.json file created.');
+}
+
+const createIndexHtmlFile = (dir, outputDir, content) => {
+    const indexHtmlPath = `${dir}/${outputDir}/index.html`;
+    fsExtra.writeFileSync(indexHtmlPath, content);
+    if(debug)
+    console.log('index.html file created');
+}
+
+const createPackageJsonFile = (directory, content) => {
+    const packageJsonPath = `${directory}/package.json`;
+    jsonfile.writeFileSync(packageJsonPath, content, { spaces: 2 });
+    if(debug) {
+        console.log('package.json file created.');
+    }        
+}
+
 module.exports.createDirectory = createDirectory;
 module.exports.createFile = createFile;
+module.exports.createGulpfileJsFile = createGulpfileJsFile;
+module.exports.createBsconfigFile = createBsconfigFile;
+module.exports.createIndexHtmlFile = createIndexHtmlFile;
+module.exports.createPackageJsonFile = createPackageJsonFile;