create-jwn-js 1.0.2 → 1.0.3

package/index.js

@@ -23,6 +23,17 @@ const FRAMEWORKS = [
                 color: blue
             }
         ]
+    },
+    {
+        name: 'vite-vue3',
+        color: yellow,
+        variants: [
+            {
+                name: 'vite-vue3-ts',
+                display: 'TypeScript',
+                color: blue
+            }
+        ]
     }
 ]
 const TEMPLATES = FRAMEWORKS.map(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-jwn-js",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "license": "PRIVATE",
   "author": "Webigorkiev",
   "bin": {

package/template-vite-vue3-ts/.gitignore

@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+*.local
+connect.json
+.idea

package/template-vite-vue3-ts/connect-template.json

@@ -0,0 +1,36 @@
+{
+    "server": {
+        "development": {
+            "mode": "development",
+            "vite": {
+                "port": 3000
+            },
+            "port": 3001,
+            "host": "localhost"
+        },
+        "production": {
+            "mode": "production",
+            "port": 3000,
+            "host": "127.0.0.1",
+            "url": "http://127.0.0.1"
+        }
+    },
+    "db": {
+        "home": {
+            "engine": "mysql",
+            "host": "localhost",
+            "user": "",
+            "password": "",
+            "database": "",
+            "connectTimeout": 10000,
+            "acquireTimeout": 10000,
+            "connectionLimit": 2,
+            "charset": "utf8",
+            "compress": true,
+            "port": 3306,
+            "multipleStatements": true,
+            "namedPlaceholders": true,
+            "dateStrings": true
+        }
+    }
+}

package/template-vite-vue3-ts/cron.js

@@ -0,0 +1,90 @@
+const {appendFileSync} = require("fs");
+const {performance} = require("perf_hooks");
+const margv = require("margv");
+const fetch = require("cross-fetch");
+const chalk = require("chalk");
+const fs = require("fs");
+const path = require("path");
+
+const logFile = "/var/www/tehnoskarb/logs/cron/skarb.works.log";
+const two = (value) => ("0" + value).slice(-2);
+const toMysqlDatetime = (date) => `${date.getFullYear()}-${two(date.getMonth()+1)}-${two(date.getDate())} ${two(date.getHours())}:${two(date.getMinutes())}:${two(date.getSeconds())}`;
+
+(async() => {
+    const start = performance.now();
+    const args = margv();
+
+    if(args.help) {
+        console.log(`// $ cron.js -c=<controller> -s=<subaction> -p={} -m=<method> -h={} --development`);
+
+        return;
+    }
+
+    const connect = path.resolve(__dirname, './connect.json');
+    const config = JSON.parse(fs.readFileSync(connect, 'utf8'));
+    const host = args.development || args.d
+        ? `http://${config.server.development.host}:${config.server.development.port}/web`
+        : `http://${config.server.production.host}:${config.server.production.port}/web`;
+    const controller = args.controller || args.c;
+    const subaction = args.subaction || args.s;
+    const params = args.params || args.p || {};
+    const method = args.method || args.m || "get";
+    const headers = args.headers || args.h || {};
+    const adminToken = config.cron["admin-token"];
+    const apiToken = config.cron["api-token"];
+
+    console.log(chalk.green(host));
+
+    if(!controller) {
+        console.log(chalk.red("required --controller=<controller>"));
+
+        return;
+    }
+
+    if(!subaction) {
+        console.log(chalk.red("required --subaction=<subaction>"));
+
+        return;
+    }
+
+    const url = new URL(host);
+    const options = {
+        compress: true,
+        method,
+        headers: {
+            "content-type": "application/json",
+            "cookie":`admin-token=${adminToken}`,
+            ...headers
+        }
+    }
+
+    if(method.toLowerCase() === "get") {
+        url.search = new URLSearchParams(Object.assign(params, {controller, subaction, token: apiToken})).toString();
+    } else {
+        options.body = JSON.stringify(Object.assign(params, {controller, subaction, token: apiToken}));
+    }
+
+    console.log(chalk.green(`send params to ${controller} ${subaction}`));
+    const response = await fetch(url.toString(), options);
+    const text = decodeURIComponent(await response.text());
+    const time = Math.round(performance.now() - start)/1000;
+    const logParams = (JSON.stringify(Object.assign(params, {subaction}))
+        .substring(0, 512));
+
+    try {
+        appendFileSync(
+            logFile,
+            `${toMysqlDatetime(new Date())}\t${time}\t${text}\t${host}\t${logParams}\n`
+        );
+    } catch(e) {
+        console.log(chalk.red( `No log file ${logFile}`));
+    }
+
+    if(response.ok) {
+        console.log(chalk.green("response ok."));
+        console.log(chalk.green(text));
+    } else {
+        console.log(chalk.red("Error during request!"));
+        console.log(chalk.red(text));
+    }
+})();

package/template-vite-vue3-ts/docs/index.md

@@ -0,0 +1,27 @@
+# Template template-vite-vue3-ts
+
+```typescript
+yarn
+```
+
+### Develop
+
+```bash
+yarn dev
+```
+
+### Test
+
+```bash
+yarn test
+```
+
+### Docs
+
+```bash
+yarn docs:dev
+```
+
+```bash
+yarn docs:build
+```

package/template-vite-vue3-ts/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="msapplication-TileColor" content="#da532c">
+        <meta name="theme-color" content="#ffffff">
+        <meta name='viewport' content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0">
+        <style>
+            .iconing {
+                width: 20px;
+            }
+        </style>
+    </head>
+    <body>
+        <div id="app"></div>
+        <script type="module" src="/src/frontend/entry-client.ts"></script>
+    </body>
+</html>

package/template-vite-vue3-ts/jest.config.ts

@@ -0,0 +1,38 @@
+export default {
+    moduleFileExtensions: [
+        "js",
+        "ts",
+        "json",
+        "vue",
+        "node"
+    ],
+    transform: {
+        "^.+\\.ts$": "ts-jest",
+        "^.+\\.vue$": "@vue/vue3-jest"
+    },
+    moduleNameMapper: {
+        "@/(.*)$": "<rootDir>/src/$1"
+    },
+    setupFiles: ["./src/scripts/jest.setup.ts"],
+    globalSetup: "./src/scripts/jest.global.setup.ts",
+    globalTeardown: "./src/scripts/jest.global.teardown.ts",
+    testTimeout: 35000,
+    globals: {
+        'ts-jest': {
+            tsconfig: './tsconfig.json',
+            diagnostics: false
+        }
+    },
+    testEnvironment: "jsdom",
+    maxWorkers: 2,
+    testMatch: [ "**/__its__/**/*.[jt]s?(x)", "**/__tests__/**/*.[jt]s?(x)", "**/?(*.)+(spec|test).[jt]s?(x)" ],
+    testPathIgnorePatterns: ["<rootDir>/src/scripts",],
+    collectCoverageFrom: [
+        "**/src/**/*.{ts}",
+        "!**/src/**/*.d.ts",
+        "!**/src/**/index.ts",
+        "!**/src/scripts/**",
+        "!**/src/sql/**",
+        "!**/src/backend/server/web-routes/**",
+    ]
+};

package/template-vite-vue3-ts/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "template-vite-vue3-ts",
+  "private": true,
+  "author": "webigorkiev",
+  "license": "PRIVATE",
+  "version": "1.0.1",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "test": "jest src -c jest.config.ts --silent true",
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "vitepress build docs",
+    "docs:serve": "vitepress serve docs"
+  },
+  "devDependencies": {
+    "@types/jest": "^27.0.3",
+    "@types/memjs": "^1.2.4",
+    "@types/node": "^17.0.4",
+    "@vue/compiler-sfc": "^3.2.26",
+    "@vue/test-utils": "^2.0.0-rc.18",
+    "@vue/vue3-jest": "^27.0.0-alpha.4",
+    "autoprefixer": "^10.4.1",
+    "jest": "^27.4.5",
+    "ts-jest": "^27.1.2",
+    "ts-node": "^10.4.0",
+    "typescript": "^4.4.4",
+    "vite": "^2.7.10",
+    "vite-svg-loader": "^3.1.1",
+    "vitepress": "^0.20.10"
+  },
+  "dependencies": {
+    "@jwn-js/common": "^2.0.7",
+    "@jwn-js/plugins": "^1.0.13",
+    "@vue/server-renderer": "^3.2.26",
+    "@vuemod/prefetch": "^1.0.10",
+    "amitt": "^1.0.5",
+    "buildmsql": "^1.3.2",
+    "chalk": "4",
+    "cross-fetch": "^3.1.4",
+    "easy-ash": "^1.1.5",
+    "margv": "^1.1.2",
+    "memjs": "^1.3.0",
+    "postcss": "^8.3.5",
+    "postcss-custom-media": "^8.0.0",
+    "postcss-each": "^1.1.0",
+    "postcss-load-config": "^3.1.0",
+    "postcss-nested": "^5.0.5",
+    "postcss-nesting": "^8.0.1",
+    "postcss-plugin": "^1.0.0",
+    "postcss-scss": "^4.0.0",
+    "primevue": "^3.10.0",
+    "vue": "^3.2.26",
+    "vue-router": "^4.0.12",
+    "vuex": "^4.0.2",
+    "vuex-router-sync": "^6.0.0-rc.1"
+  }
+}

package/template-vite-vue3-ts/postcss.config.js

@@ -0,0 +1,28 @@
+module.exports = (ctx) => {
+
+    return {
+        parser: 'postcss-scss',
+        map: {
+            inline: true
+        },
+        plugins: {
+            'postcss-nested': {},
+            'postcss-custom-media': {
+                importFrom: [
+                    {
+                        customMedia: {
+                            '--xxl': '(max-width: 1920px)',
+                            '--xl': '(min-width: 1200px)',
+                            '--lg': '(min-width: 992px)',
+                            '--md': '(min-width: 768px)',
+                            '--sm': '(min-width: 576px)',
+                            '--mm': '(max-width: 375px)',
+                        }
+                    },
+                ]
+            },
+            'postcss-each': {},
+            'autoprefixer': {}
+        }
+    }
+};

package/template-vite-vue3-ts/src/backend/server/helpers/createConfigServer.ts

@@ -0,0 +1,16 @@
+import margv from "margv";
+const args = margv();
+
+/**
+ * Config for server
+ * @param config
+ */
+export const createConfigServer = (config: Record<string, any>) => {
+    const configServer = process.env.NODE_ENV === "production" ? config.server.production : config.server.development;
+    configServer.port = +args.port + 1 || configServer.port;
+    configServer.host = args.host || configServer.host;
+    configServer.proxy =  `http://${configServer.host}:${configServer.port}`;
+    configServer.vitePort = config.server.development.vite.port;
+
+    return configServer;
+}

package/template-vite-vue3-ts/src/backend/server/helpers/createMariadb.ts

@@ -0,0 +1,16 @@
+import {Query} from "buildmsql";
+
+/**
+ * Create mariadb pool
+ * @param config
+ */
+export const createMariadb = (config: Record<string, any>) => {
+    if(config.db.home) {
+        const home = new Query({debug: process.env.NODE_ENV === "production" ? 0 : 1});
+        const homePool = home.createPool(config.db.home);
+
+        return {homePool, home};
+    }
+
+    return {};
+}

package/template-vite-vue3-ts/src/backend/server/helpers/createMemcached.ts

@@ -0,0 +1,15 @@
+import memjs from "memjs";
+import {Memcached} from "@jwn-js/common";
+
+export const createMemcached = () => {
+    const memcachedClient = memjs.Client.create("127.0.0.1:11211", {
+        timeout: 1,
+        conntimeout: 1,
+        logger: {
+            log: () => {}
+        }
+    });
+    const memcached =  new Memcached(memcachedClient);
+
+    return {memcachedClient, memcached};
+}

package/template-vite-vue3-ts/src/backend/server/helpers/readManifest.ts

@@ -0,0 +1,16 @@
+import {helpers} from "@jwn-js/common";
+
+/**
+ * Read ssr manifest
+ */
+export const readManifest = () => {
+    let manifest = {};
+
+    try {
+        manifest = helpers.readConfigSync("./dist/client/ssr-manifest.json");
+    } catch(e: any) {
+        // console.log(e.message);
+    }
+
+    return manifest;
+}

package/template-vite-vue3-ts/src/backend/server/index.ts

@@ -0,0 +1,51 @@
+import {Server, helpers, Web, Ssr, OptionsWeb, OptionsSsr} from "@jwn-js/common";
+import {createConfigServer} from "./helpers/createConfigServer";
+import {schema} from "./site-schema";
+import {webRoutes} from "./web-routes";
+import {createMariadb} from "./helpers/createMariadb";
+import {createMemcached} from "./helpers/createMemcached";
+import {readManifest} from "@/backend/server/helpers/readManifest";
+import entry from "@/frontend/main";
+declare var process: any;
+
+const {readConfigSync} = helpers;
+process.server = process.server || {};
+let memcachedClient, memcached, home;
+const config = readConfigSync("./connect.json");
+const configServer = createConfigServer(config);
+
+if(process.env.NODE_ENV === "production") {
+    ({home} = createMariadb(config));
+    ({memcachedClient, memcached} = createMemcached());
+}
+const webOptions: OptionsWeb = {
+    routes: webRoutes,
+    config,
+    db: process.server.db || {
+        home
+    },
+    memcached: process.server.memcached || memcached,
+    schema
+}
+const ssrOptions:OptionsSsr  = {
+    manifest: readManifest(),
+    memcached: process.server.memcached || memcached
+}
+
+process.server.app = new Server({
+    ...configServer,
+    routes: [
+        {
+            method: "any",
+            pattern: "/web",
+            handler: (res, req) => new Web(res, req, webOptions).request()
+        },
+        {
+            method: "get",
+            pattern: "/*",
+            handler: (res, req) => new Ssr(res, req, ssrOptions, entry).request()
+        }
+    ]
+})
+    .app()
+    .listen();

package/template-vite-vue3-ts/src/backend/server/site-schema.ts

@@ -0,0 +1,21 @@
+import {Schema} from "@jwn-js/common";
+
+export const schema: Schema = {
+    actions: [
+        {
+            name: "view"
+        }
+    ],
+    controllers: [
+        {
+            id: 1,
+            name: "Index",
+            subactions: [
+                {
+                    name: "index",
+                    action: "view"
+                }
+            ]
+        }
+    ]
+}

package/template-vite-vue3-ts/src/backend/server/web-routes/index.ts

@@ -0,0 +1,9 @@
+import {Route} from "@jwn-js/common";
+
+export const webRoutes: Array<Route> = [
+    {
+        method: "any",
+        name: "Index",
+        component: () => import("@/backend/views/Index/IndexController")
+    },
+];

package/template-vite-vue3-ts/src/backend/views/Index/IndexController.ts

@@ -0,0 +1,16 @@
+import {Controller} from "@jwn-js/common";
+import {http} from "@jwn-js/common";
+
+export default class IndexController extends Controller {
+
+    @http()
+    async index() {
+
+        return {
+            page: {
+                title: "Index Page",
+                h1: "Index page h1"
+            }
+        }
+    }
+}

package/template-vite-vue3-ts/src/frontend/App.vue

@@ -0,0 +1,30 @@
+<template>
+    <div class="app">
+        <RouterView />
+    </div>
+</template>
+
+<script lang="ts">
+    import {defineComponent, computed} from "vue";
+    import {useStore} from "vuex";
+    import {useHead} from "@vueuse/head";
+
+
+    /**
+     * @emits
+     * web-notification - open notification
+     * confirm - open confirm dialog
+     */
+    export default defineComponent({
+        name: "App",
+        setup() {
+            const store = useStore();
+            useHead(computed(() => store.state.page));
+        }
+    })
+</script>
+
+<style lang="postcss">
+    @import "~primevue/resources/themes/bootstrap4-light-blue/theme.css";
+    @import "~primevue/resources/primevue.min.css";
+</style>

package/template-vite-vue3-ts/src/frontend/entry-client.ts

@@ -0,0 +1,2 @@
+import entry from "./main";
+export default entry;

package/template-vite-vue3-ts/src/frontend/entry-server.ts

@@ -0,0 +1,4 @@
+import entry from "./main";
+import "@/backend/server";
+
+export default entry;

package/template-vite-vue3-ts/src/frontend/helpers/customerPrefetch.ts

@@ -0,0 +1,46 @@
+import type {Store} from "vuex";
+import {NavigationGuardFetchWithThis} from "@vuemod/prefetch";
+import {RouteLocationNormalized} from "vue-router";
+
+interface Options {
+    store: Store<any>,
+    isFetch: boolean,
+}
+declare type Callback = (
+    store: Store<any>,
+    body: Record<string, any>,
+    to:RouteLocationNormalized,
+    from:RouteLocationNormalized
+) => Promise<void>
+
+/**
+ * Admin prefetch helper
+ * @param options
+ * @param fn
+ */
+export const customerPrefetch = (options: {
+    controller?: string,
+    subaction?: string,
+    memcache?: number,
+}, fn?:Callback): NavigationGuardFetchWithThis<any> => {
+
+    return async ({store, isFetch}: Options, to, from) => {
+        if(isFetch) {
+            const {body} = await store.dispatch("fetch", [{
+                    lang: store.state.toLang,
+                    route: to.fullPath,
+                    ...(to.query || {}),
+                    ...(options || {})
+                }, {
+                ...(store.state?.Customer?.jwt ? {mergeHeaders: {"authorization": `Bearer ${store.state.Customer.jwt}`}} : {})
+            }]);
+            store.commit("SET_PAGE", body.data?.page || {});
+            store.commit("MERGE_CONTEXT", {memcache: options.memcache});
+
+            if(fn) {
+                await fn(store, body, to, from);
+            }
+        }
+
+    }
+}

package/template-vite-vue3-ts/src/frontend/main.ts

@@ -0,0 +1,68 @@
+import ssr, {Context} from "vite-ssr-vue";
+import App from "./App.vue";
+import createRouter from "./routes";
+import createStore from "./store";
+import {createHead} from "@vueuse/head";
+import {createPrefetch} from "@vuemod/prefetch";
+import {amitt} from "amitt";
+import {sync} from "vuex-router-sync";
+
+// Multilang
+import Multilang from "@jwn-js/plugins/Multilang";
+import {parseLang} from "@/helpers/parseLang";
+
+// Primevue
+import PrimeVue from 'primevue/config';
+import ConfirmationService from 'primevue/confirmationservice';
+
+const defaultLang = "ru";
+
+export default ssr(App, {
+    created({app, context, req, res, isClient}) {
+        const emitter = amitt();
+        const head = createHead();
+        const router = createRouter({isClient});
+        const store = createStore({
+            redirect: async function(url: string, statusCode: number = 307) {
+                console.log("Redirecting: " + url);
+                if(isClient) {
+                    await router.push(url);
+                } else {
+                    res.redirect(url, statusCode);
+                }
+            }
+        });
+        app.use(router);
+        app.use(store);
+        app.use(head);
+        app.use(Multilang, {
+            default: defaultLang,
+            getLang() {
+
+                return store.state.lang;
+            }
+        });
+        sync(store, router);
+
+        const prefetch = createPrefetch();
+        app.use(prefetch, router, store);
+        app.use(PrimeVue);
+        app.use(ConfirmationService);
+        app.config.globalProperties.$emitter = emitter;
+
+        if(!isClient) {
+            store.state.context = context as Context;
+        }
+
+        // Routers hooks
+        router.beforeEach(async (to) => {
+            store.commit('SET_TO_LANG', parseLang(to.fullPath, defaultLang));
+        });
+
+        router.afterEach(async (to, from) => {
+            store.commit('SET_LANG', parseLang(to.fullPath, defaultLang));
+        });
+
+        return {head, router, store}
+    }
+});