innetjs 1.12.1 → 2.0.2

package/README.md

@@ -58,9 +58,6 @@ Use the command in the project folder to build it.
 innetjs build
 ```
 
-## Links
-Check [README.md](https://github.com/d8corp/innetjs/tree/main/src/templates/fe) of `fe` template
-
 ## Issues
 If you find a bug or have a suggestion, please file an issue on [GitHub](https://github.com/d8corp/innetjs/issues).
 

package/bin/innet

@@ -1,19 +1,20 @@
 #!/usr/bin/env node
 'use strict';
 
-var path = require('path');
+var path$1 = require('path');
 var fs = require('fs-extra');
 var http = require('http');
 var https = require('https');
+var util = require('util');
+var axios = require('axios');
 var logger = require('@cantinc/logger');
 var chalk = require('chalk');
-var util = require('util');
 var rollup = require('rollup');
 var commonjs = require('@rollup/plugin-commonjs');
 var pluginNodeResolve = require('@rollup/plugin-node-resolve');
 var rollupPluginTerser = require('rollup-plugin-terser');
 var typescript = require('rollup-plugin-typescript2');
-var postcss = require('rollup-plugin-postcss');
+var styles = require('rollup-plugin-styles');
 var autoprefixer = require('autoprefixer');
 var express = require('express');
 var json = require('@rollup/plugin-json');
@@ -22,20 +23,25 @@ var proxy = require('express-http-proxy');
 var selector = require('cli-select');
 var jsx = require('rollup-plugin-innet-jsx');
 var filesize = require('rollup-plugin-filesize');
+var image = require('@rollup/plugin-image');
+var eslint = require('@rollup/plugin-eslint');
+var linesAndColumns = require('lines-and-columns');
+var unzipper = require('unzipper');
 var commander = require('commander');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var path__default = /*#__PURE__*/_interopDefaultLegacy(path);
+var path__default = /*#__PURE__*/_interopDefaultLegacy(path$1);
 var fs__default = /*#__PURE__*/_interopDefaultLegacy(fs);
 var http__default = /*#__PURE__*/_interopDefaultLegacy(http);
 var https__default = /*#__PURE__*/_interopDefaultLegacy(https);
+var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
 var logger__default = /*#__PURE__*/_interopDefaultLegacy(logger);
 var chalk__default = /*#__PURE__*/_interopDefaultLegacy(chalk);
 var rollup__default = /*#__PURE__*/_interopDefaultLegacy(rollup);
 var commonjs__default = /*#__PURE__*/_interopDefaultLegacy(commonjs);
 var typescript__default = /*#__PURE__*/_interopDefaultLegacy(typescript);
-var postcss__default = /*#__PURE__*/_interopDefaultLegacy(postcss);
+var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
 var autoprefixer__default = /*#__PURE__*/_interopDefaultLegacy(autoprefixer);
 var express__default = /*#__PURE__*/_interopDefaultLegacy(express);
 var json__default = /*#__PURE__*/_interopDefaultLegacy(json);
@@ -44,8 +50,10 @@ var proxy__default = /*#__PURE__*/_interopDefaultLegacy(proxy);
 var selector__default = /*#__PURE__*/_interopDefaultLegacy(selector);
 var jsx__default = /*#__PURE__*/_interopDefaultLegacy(jsx);
 var filesize__default = /*#__PURE__*/_interopDefaultLegacy(filesize);
+var image__default = /*#__PURE__*/_interopDefaultLegacy(image);
+var eslint__default = /*#__PURE__*/_interopDefaultLegacy(eslint);
 
-/*! *****************************************************************************
+/******************************************************************************
 Copyright (c) Microsoft Corporation.
 
 Permission to use, copy, modify, and/or distribute this software for any
@@ -70,12 +78,77 @@ function __awaiter(thisArg, _arguments, P, generator) {
     });
 }
 
-const livereload = require('rollup-plugin-livereload');
-const { string } = require('rollup-plugin-string');
-const { exec, spawn } = require('child_process');
-const readline = require('readline');
-const execAsync = util.promisify(exec);
-require('dotenv').config();
+const Writer = require('fstream').Writer;
+const path = require('path');
+const stream = require('stream');
+const duplexer2 = require('duplexer2');
+const Promise$1 = require('bluebird');
+function Extract(opts, template) {
+    const reduceCount = 19 + template.length;
+    // make sure path is normalized before using it
+    opts.path = path.resolve(path.normalize(opts.path));
+    // @ts-ignore
+    const parser = new unzipper.Parse(opts);
+    const outStream = new stream.Writable({ objectMode: true });
+    outStream._write = function (entry, encoding, cb) {
+        if (entry.type === 'Directory')
+            return cb();
+        const extractPath = path.join(opts.path, entry.path.slice(reduceCount));
+        if (extractPath.indexOf(opts.path) !== 0) {
+            return cb();
+        }
+        const writer = opts.getWriter ? opts.getWriter({ path: extractPath }) : Writer({ path: extractPath });
+        entry.pipe(writer)
+            .on('error', cb)
+            .on('close', cb);
+    };
+    const extract = duplexer2(parser, outStream);
+    parser.once('crx-header', function (crxHeader) {
+        extract.crxHeader = crxHeader;
+    });
+    parser
+        .pipe(outStream)
+        .on('finish', function () {
+        extract.emit('close');
+    });
+    extract.promise = function () {
+        return new Promise$1(function (resolve, reject) {
+            extract.on('close', resolve);
+            extract.on('error', reject);
+        });
+    };
+    return extract;
+}
+
+const lintIncludeDom = [
+    '**/*.ts',
+    '**/*.tsx',
+    '**/*.js',
+    '**/*.jsx',
+];
+const stringExcludeDom = [
+    '**/*.ts',
+    '**/*.tsx',
+    '**/*.js',
+    '**/*.jsx',
+    '**/*.json',
+    '**/*.css',
+    '**/*.scss',
+    '**/*.webp',
+    '**/*.gif',
+    '**/*.png',
+    '**/*.jpeg',
+    '**/*.jpg',
+    '**/*.svg',
+];
+const stringExcludeNode = [
+    '**/*.ts',
+    '**/*.tsx',
+    '**/*.js',
+    '**/*.jsx',
+    '**/*.json',
+];
+
 function getFile(file) {
     file = path__default["default"].resolve(file);
     if (!fs__default["default"].existsSync(file)) {
@@ -98,16 +171,35 @@ function getFile(file) {
     }
     return file;
 }
+function convertIndexFile(data, version) {
+    return __awaiter(this, void 0, void 0, function* () {
+        return data
+            .toString()
+            .replace('</head>', `<script type="module" defer src="index.js${version ? `?v=${version}` : ''}"></script></head>`);
+    });
+}
 const reporter = (options, outputOptions, info) => {
     logger__default["default"].log(`${chalk__default["default"].yellow(info.fileName)} ${chalk__default["default"].green(info.bundleSize)} [ gzip: ${chalk__default["default"].green(info.gzipSize)} ]`);
     return '';
-};
+};
+
+const livereload = require('rollup-plugin-livereload');
+const { string } = require('rollup-plugin-string');
+const { exec, spawn } = require('child_process');
+const readline = require('readline');
+const execAsync = util.promisify(exec);
+const copyFiles = util.promisify(fs__default["default"].copy);
+require('dotenv').config();
 class InnetJS {
-    constructor({ projectFolder = process.env.PROJECT_FOLDER || '', publicFolder = process.env.PUBLIC_FOLDER || 'public', buildFolder = process.env.BUILD_FOLDER || path__default["default"].join('public', 'build'), srcFolder = process.env.SRC_FOLDER || 'src', sourcemap = process.env.SOURCEMAP ? process.env.SOURCEMAP === 'true' : false, cssModules = process.env.CSS_MODULES ? process.env.CSS_MODULES === 'true' : false, cssInJs = process.env.CSS_IN_JS ? process.env.CSS_IN_JS === 'true' : false, sslKey = process.env.SSL_KEY || 'localhost.key', sslCrt = process.env.SSL_CRT || 'localhost.crt', proxy = process.env.PROXY || '', port = process.env.PORT ? +process.env.PORT : 3000, api = process.env.API || '*', } = {}) {
+    constructor({ projectFolder = process.env.PROJECT_FOLDER || '', publicFolder = process.env.PUBLIC_FOLDER || 'public', buildFolder = process.env.BUILD_FOLDER || 'build', srcFolder = process.env.SRC_FOLDER || 'src', sourcemap = process.env.SOURCEMAP ? process.env.SOURCEMAP === 'true' : false, cssModules = process.env.CSS_MODULES ? process.env.CSS_MODULES === 'true' : true, cssInJs = process.env.CSS_IN_JS ? process.env.CSS_IN_JS === 'true' : true, sslKey = process.env.SSL_KEY || 'localhost.key', sslCrt = process.env.SSL_CRT || 'localhost.crt', proxy = process.env.PROXY || '', port = process.env.PORT ? +process.env.PORT : 3000, api = process.env.API || '*', } = {}) {
         this.projectFolder = path__default["default"].resolve(projectFolder);
         this.publicFolder = path__default["default"].resolve(publicFolder);
         this.buildFolder = path__default["default"].resolve(buildFolder);
         this.srcFolder = path__default["default"].resolve(srcFolder);
+        this.publicIndexFile = path__default["default"].join(publicFolder, 'index.html');
+        this.buildIndexFile = path__default["default"].join(buildFolder, 'index.html');
+        this.devBuildFolder = path__default["default"].resolve(projectFolder, 'node_modules', '.cache', 'innetjs', 'build');
+        this.devBuildIndexFile = path__default["default"].join(this.devBuildFolder, 'index.html');
         this.sourcemap = sourcemap;
         this.cssModules = cssModules;
         this.cssInJs = cssInJs;
@@ -121,14 +213,18 @@ class InnetJS {
     init(appName, { template, force = false } = {}) {
         return __awaiter(this, void 0, void 0, function* () {
             const appPath = path__default["default"].resolve(appName);
-            if (!template) {
+            const { data } = yield logger__default["default"].start('Get templates list', () => __awaiter(this, void 0, void 0, function* () { return yield axios__default["default"].get('https://api.github.com/repos/d8corp/innetjs-templates/branches'); }));
+            const templates = data.map(({ name }) => name).filter(name => name !== 'main');
+            if (!template || !templates.includes(template)) {
                 logger__default["default"].log(chalk__default["default"].green(`Select one of those templates`));
                 const { value } = yield selector__default["default"]({
-                    values: ['fe', 'be']
+                    values: templates
                 });
                 template = value;
                 readline.moveCursor(process.stdout, 0, -1);
-                logger__default["default"].log(`Selected ${value} template`);
+                const text = `Selected template: ${chalk__default["default"].white(value)}`;
+                logger__default["default"].start(text);
+                logger__default["default"].end(text);
             }
             if (!force) {
                 yield logger__default["default"].start('Check if app folder is available', () => __awaiter(this, void 0, void 0, function* () {
@@ -148,14 +244,16 @@ class InnetJS {
                     }
                 }));
             }
-            const libPath = path__default["default"].resolve(__dirname, '..');
-            const templatePath = path__default["default"].resolve(libPath, 'templates', template);
-            yield logger__default["default"].start('Check if the template exists', () => __awaiter(this, void 0, void 0, function* () {
-                if (!fs__default["default"].existsSync(templatePath)) {
-                    throw Error(`The template '${template}' is not exist`);
-                }
+            yield logger__default["default"].start('Download template', () => __awaiter(this, void 0, void 0, function* () {
+                const { data } = yield axios__default["default"].get(`https://github.com/d8corp/innetjs-templates/archive/refs/heads/${template}.zip`, {
+                    responseType: 'stream'
+                });
+                yield new Promise((resolve, reject) => {
+                    data.pipe(Extract({
+                        path: appPath,
+                    }, template)).on('finish', resolve).on('error', reject);
+                });
             }));
-            yield logger__default["default"].start('Copy files', () => fs__default["default"].copy(templatePath, appPath));
             yield logger__default["default"].start('Install packages', () => execAsync(`cd ${appPath} && npm i`));
         });
     }
@@ -166,6 +264,7 @@ class InnetJS {
             const pkg = node && (yield this.getPackage());
             const inputOptions = {
                 input: path__default["default"].resolve(this.srcFolder, `index.${indexExtension}`),
+                preserveEntrySignatures: 'strict',
                 plugins: [
                     commonjs__default["default"](),
                     json__default["default"](),
@@ -184,34 +283,30 @@ class InnetJS {
                     moduleDirectories: [path__default["default"].resolve(this.buildFolder, 'node_modules')]
                 }), string({
                     include: '**/*.*',
-                    exclude: [
-                        '**/*.ts',
-                        '**/*.tsx',
-                        '**/*.js',
-                        '**/*.jsx',
-                        '**/*.json',
-                    ]
+                    exclude: stringExcludeNode,
                 }));
             }
             else {
-                inputOptions.plugins.push(pluginNodeResolve.nodeResolve(), string({
-                    include: '**/*.*',
-                    exclude: [
-                        '**/*.ts',
-                        '**/*.tsx',
-                        '**/*.js',
-                        '**/*.jsx',
-                        '**/*.json',
-                        '**/*.css',
-                        '**/*.scss',
-                    ]
-                }), postcss__default["default"]({
-                    plugins: [autoprefixer__default["default"]()],
-                    extract: !this.cssInJs,
-                    modules: this.cssModules,
-                    sourceMap: this.sourcemap,
-                    minimize: true
-                }));
+                inputOptions.plugins = [
+                    eslint__default["default"]({
+                        include: lintIncludeDom,
+                    }),
+                    ...inputOptions.plugins,
+                    pluginNodeResolve.nodeResolve(),
+                    image__default["default"](),
+                    styles__default["default"]({
+                        mode: this.cssInJs ? 'inject' : 'extract',
+                        url: true,
+                        plugins: [autoprefixer__default["default"]()],
+                        modules: this.cssModules,
+                        sourceMap: this.sourcemap,
+                        minimize: true,
+                    }),
+                    string({
+                        include: '**/*.*',
+                        exclude: stringExcludeDom,
+                    }),
+                ];
                 outputOptions.format = 'es';
                 outputOptions.plugins = [
                     rollupPluginTerser.terser(),
@@ -224,6 +319,12 @@ class InnetJS {
                 const bundle = yield rollup__default["default"].rollup(inputOptions);
                 yield bundle.write(outputOptions);
                 yield bundle.close();
+                if (!node) {
+                    yield copyFiles(this.publicFolder, this.buildFolder);
+                    const data = yield fs.promises.readFile(this.publicIndexFile);
+                    const pkg = yield this.getPackage();
+                    yield fs.promises.writeFile(this.buildIndexFile, yield convertIndexFile(data, pkg.version));
+                }
             }));
             if (pkg) {
                 yield logger__default["default"].start('Copy package.json', () => __awaiter(this, void 0, void 0, function* () {
@@ -244,12 +345,13 @@ class InnetJS {
     start({ node = false, error = false } = {}) {
         return __awaiter(this, void 0, void 0, function* () {
             const indexExtension = yield this.getProjectExtension();
-            const pkg = node && (yield this.getPackage());
-            yield logger__default["default"].start('Remove build', () => fs__default["default"].remove(this.buildFolder));
+            const pkg = yield this.getPackage();
+            yield logger__default["default"].start('Remove build', () => fs__default["default"].remove(this.devBuildFolder));
             const options = {
                 input: path__default["default"].resolve(this.srcFolder, `index.${indexExtension}`),
+                preserveEntrySignatures: 'strict',
                 output: {
-                    dir: this.buildFolder,
+                    dir: this.devBuildFolder,
                     sourcemap: true
                 },
                 plugins: [
@@ -272,13 +374,7 @@ class InnetJS {
                     moduleDirectories: [path__default["default"].resolve(this.srcFolder, 'node_modules')]
                 }), string({
                     include: '**/*.*',
-                    exclude: [
-                        '**/*.ts',
-                        '**/*.tsx',
-                        '**/*.js',
-                        '**/*.jsx',
-                        '**/*.json',
-                    ]
+                    exclude: stringExcludeNode,
                 }), this.createServer(options.external));
             }
             else {
@@ -293,28 +389,42 @@ class InnetJS {
                         ? fs__default["default"].readFileSync(this.sslCrt)
                         : undefined;
                 options.output.format = 'es';
-                options.plugins.push(pluginNodeResolve.nodeResolve(), string({
-                    include: '**/*.*',
-                    exclude: [
-                        '**/*.ts',
-                        '**/*.tsx',
-                        '**/*.js',
-                        '**/*.jsx',
-                        '**/*.json',
-                        '**/*.css',
-                        '**/*.scss',
-                    ]
-                }), postcss__default["default"]({
-                    plugins: [autoprefixer__default["default"]()],
-                    modules: this.cssModules,
-                    sourceMap: true,
-                    extract: !this.cssInJs,
-                }), this.createClient(key, cert), livereload(Object.assign({ watch: this.publicFolder, verbose: false }, (key && cert ? { https: { key, cert } } : {}))));
+                options.plugins = [
+                    eslint__default["default"]({
+                        include: lintIncludeDom,
+                    }),
+                    ...options.plugins,
+                    pluginNodeResolve.nodeResolve(),
+                    image__default["default"](),
+                    styles__default["default"]({
+                        mode: this.cssInJs ? 'inject' : 'extract',
+                        url: true,
+                        plugins: [autoprefixer__default["default"]()],
+                        modules: this.cssModules,
+                        sourceMap: true,
+                    }),
+                    string({
+                        include: '**/*.*',
+                        exclude: stringExcludeDom,
+                    }),
+                    this.createClient(key, cert, pkg),
+                    livereload(Object.assign({ watch: this.publicFolder, verbose: false }, (key && cert ? { https: { key, cert } } : {})))
+                ];
             }
             const watcher = rollup__default["default"].watch(options);
-            watcher.on('event', e => {
+            watcher.on('event', (e) => __awaiter(this, void 0, void 0, function* () {
                 if (e.code == 'ERROR') {
-                    logger__default["default"].end('Bundling', error ? e.error.stack : e.error.message);
+                    if (e.error.code === 'UNRESOLVED_IMPORT') {
+                        const [, importer, file] = e.error.message.match(/^Could not resolve '(.+)' from (.+)$/);
+                        const text = (yield fs__default["default"].readFile(file)).toString();
+                        const lines = new linesAndColumns.LinesAndColumns(text);
+                        const { line, column } = lines.locationForIndex(text.indexOf(importer));
+                        logger__default["default"].end('Bundling', e.error.message);
+                        console.log(`ERROR in ${file}:${line + 1}:${column + 1}`);
+                    }
+                    else {
+                        logger__default["default"].end('Bundling', error ? e.error.stack : e.error.message);
+                    }
                 }
                 else if (e.code === 'BUNDLE_START') {
                     logger__default["default"].start('Bundling');
@@ -322,7 +432,7 @@ class InnetJS {
                 else if (e.code === 'BUNDLE_END') {
                     logger__default["default"].end('Bundling');
                 }
-            });
+            }));
         });
     }
     run(file) {
@@ -414,14 +524,21 @@ class InnetJS {
             return this.package;
         });
     }
-    createClient(key, cert) {
+    createClient(key, cert, pkg) {
         let app;
         return {
-            writeBundle: () => {
+            writeBundle: () => __awaiter(this, void 0, void 0, function* () {
                 var _a;
                 if (!app) {
-                    const httpsUsing = !!(cert && key);
                     app = express__default["default"]();
+                    const update = () => __awaiter(this, void 0, void 0, function* () {
+                        const data = yield fs.promises.readFile(this.publicIndexFile);
+                        yield fs.promises.writeFile(this.devBuildIndexFile, yield convertIndexFile(data, pkg.version));
+                    });
+                    fs__default["default"].watch(this.publicIndexFile, update);
+                    yield update();
+                    const httpsUsing = !!(cert && key);
+                    app.use(express__default["default"].static(this.devBuildFolder));
                     app.use(express__default["default"].static(this.publicFolder));
                     if ((_a = this.proxy) === null || _a === void 0 ? void 0 : _a.startsWith('http')) {
                         app.use(this.api, proxy__default["default"](this.proxy, {
@@ -430,14 +547,14 @@ class InnetJS {
                         }));
                     }
                     app.use(/^[^.]+$/, (req, res) => {
-                        res.sendFile(this.publicFolder + '/index.html');
+                        res.sendFile(this.devBuildFolder + '/index.html');
                     });
                     const server = httpsUsing ? https__default["default"].createServer({ key, cert }, app) : http__default["default"].createServer(app);
                     server.listen(this.port, () => {
                         console.log(`${chalk__default["default"].green('➤')} Server started on http${httpsUsing ? 's' : ''}://localhost:${this.port}`);
                     });
                 }
-            }
+            })
         };
     }
     createServer(external) {
@@ -456,7 +573,7 @@ class InnetJS {
     }
 }
 
-var version = "1.12.1";
+var version = "2.0.2";
 
 require('dotenv').config();
 const innetJS = new InnetJS();

package/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const lintIncludeDom: string[];
+export declare const stringExcludeDom: string[];
+export declare const stringExcludeNode: string[];

package/declaration.d.ts

@@ -0,0 +1,39 @@
+declare module '*.scss' {
+  const content: Record<string, string>
+  export default content
+}
+
+declare module '*.css' {
+  const content: Record<string, string>
+  export default content
+}
+
+declare module '*.svg' {
+  const content: string
+  export default content
+}
+
+declare module '*.jpg' {
+  const content: string
+  export default content
+}
+
+declare module '*.jpeg' {
+  const content: string
+  export default content
+}
+
+declare module '*.png' {
+  const content: string
+  export default content
+}
+
+declare module '*.gif' {
+  const content: string
+  export default content
+}
+
+declare module '*.webp' {
+  const content: string
+  export default content
+}

package/extract.d.ts

@@ -0,0 +1 @@
+export declare function Extract(opts: any, template: any): any;

package/helpers.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="node" />
+import { FileSizeRender } from 'rollup-plugin-filesize';
+export declare function getFile(file: any): any;
+export declare function convertIndexFile(data: Buffer, version: string): Promise<string>;
+export declare const reporter: FileSizeRender<string | Promise<string>>;

package/index.d.ts

@@ -3,7 +3,11 @@ export default class InnetJS {
     projectFolder: string;
     publicFolder: string;
     buildFolder: string;
+    devBuildFolder: string;
     srcFolder: string;
+    publicIndexFile: string;
+    buildIndexFile: string;
+    devBuildIndexFile: string;
     sslKey: string;
     sslCrt: string;
     proxy: string;
@@ -39,8 +43,8 @@ export default class InnetJS {
     run(file: any): Promise<void>;
     getProjectExtension(): Promise<Extensions>;
     getPackage(): Promise<Record<string, any>>;
-    createClient(key: any, cert: any): {
-        writeBundle: () => void;
+    createClient(key: any, cert: any, pkg: any): {
+        writeBundle: () => Promise<void>;
     };
     createServer(external: string[]): {
         writeBundle: () => Promise<void>;