create-jwn-js 1.0.2 → 1.0.3

package/template-vite-vue3-ts/src/frontend/routes/index.ts

@@ -0,0 +1,42 @@
+import {createRouter, createMemoryHistory, createWebHistory} from "vue-router";
+import Error from "../views/Error/Error.vue";
+import Index from "../views/Index/Index.vue";
+
+export default (opt: Record<string, any>) => createRouter({
+    history: opt.isClient ? createWebHistory() : createMemoryHistory(),
+    routes: [
+        {
+            path: '/:lang(ua|ru|en)?',
+            component: Index,
+            name: "Index"
+        },
+        // Error
+        {
+            path: '/:code(400|401|402|403|404)',
+            name: 'Error',
+            component: Error,
+            props: true
+        },
+        {
+            path: '/:path(.*)',
+            redirect: '/404'
+        },
+    ],
+    async scrollBehavior(to, from, savedPosition) {
+
+        // Scroll to element
+        if(to.query?.el) {
+            const el: string = to.query.el as string;
+
+            return {
+                el
+            };
+        }
+
+        // meta scrollToTop
+        if(to.meta.scrollToTop) {
+
+            return {left: 0, top: 0};
+        }
+    }
+});

package/template-vite-vue3-ts/src/frontend/shims-plugins.d.ts

@@ -0,0 +1,18 @@
+import { ComponentCustomProperties, ComponentCustomOptions } from "vue";
+import {AmittEmitter} from "amitt";
+import type {NavigationGuardFetchWithThis} from "@vuemod/prefetch";
+
+declare module '@vue/runtime-core' {
+    interface ComponentCustomProperties {
+        $getLang: () => string,
+        $l:(params: Record<string, any>) => string,
+        $smoothScroll:(params: Record<string, any>) => string,
+        $emitter: AmittEmitter,
+        $refs: Record<string, any>,
+        $confirm: Record<string, any>
+    }
+
+    interface ComponentCustomOptions {
+        prefetch?: NavigationGuardFetchWithThis<undefined>
+    }
+}

package/template-vite-vue3-ts/src/frontend/shims-vue.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import { DefineComponent } from 'vue';
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

package/template-vite-vue3-ts/src/frontend/shims-vuex.d.ts

@@ -0,0 +1,10 @@
+import { ComponentCustomProperties } from 'vue'
+import { Store } from 'vuex'
+
+declare module '@vue/runtime-core' {
+
+    // provide typings for `this.$store`
+    interface ComponentCustomProperties {
+        $store: Store<any>
+    }
+}

package/template-vite-vue3-ts/src/frontend/store/fetch.ts

@@ -0,0 +1,174 @@
+import {isBrowser} from "easy-ash";
+import fetch from "cross-fetch";
+import {ApiError} from "@jwn-js/common/ApiError";
+import type {ActionContext} from "vuex";
+
+import type {FetchOptions, FetchPayload} from "./types";
+import {StateBase} from "./index";
+
+/**
+ * Fetch action
+ * @param state store state
+ * @param commit
+ * @param getters store getters
+ * @param dispatch
+ * @param params payload params
+ * @param options request options
+ */
+export const fetchAction = async(
+    {state, commit, getters, dispatch}: ActionContext<StateBase, StateBase>,
+    [
+        params = {},
+        options
+    ]: FetchPayload
+): Promise<any> => {
+    const headers: Record<string, string> = {};
+    try {
+        const isFormData = typeof FormData !== "undefined" && params instanceof FormData;
+        const ssrHeaders = (state.context.headers || {});
+
+        // Add auto lang param
+        if(isFormData) {
+            if(!params.has("lang")) {
+                params.append("lang", state.lang);
+            }
+        } else {
+            if(!(params as Record<string, any>).lang) {
+                (params as Record<string, any>).lang = state.lang;
+            }
+        }
+
+        if(isBrowser()) {
+            [
+                "host",
+                "connection",
+                "user-agent",
+                "referer",
+                "accept-encoding",
+                "cookie",
+                "sec-ch-ua",
+                "sec-ch-ua-mobile",
+                "sec-fetch-site",
+                "sec-fetch-mode",
+                "sec-fetch-dest",
+                "sec-fetch-user",
+                "sec-ch-ua-platform"
+            ].map(key => delete ssrHeaders[key]);
+        } else {
+            // if server request - add ip to x-forwarded-for
+            ssrHeaders["x-forwarded-for"] = state.context.ip;
+        }
+
+        const defaultOptions: FetchOptions = {
+            url: `${getters.getBaseUrl}/web`,
+            method: "get",
+            preloader: true,
+            error: true,
+            compress: true,
+            headers: {
+                // Proxy ssr headers to request
+                ...ssrHeaders,
+                ...(isFormData ? {} : {"content-type": "application/json"})
+            }
+        }
+        options = Object.assign(
+            {},
+            defaultOptions,
+            options || {}
+        ) as FetchOptions;
+
+        if(options?.preloader) {
+            commit('SET_LOADING', true);
+        }
+
+        // Merge headers
+        if(options.mergeHeaders) {
+            options.headers = Object.assign(options.headers || {}, options.mergeHeaders);
+            delete options.mergeHeaders;
+        }
+
+        const url = new URL(options.url as string);
+
+        if(!["get", "head"].includes(options?.method?.toLowerCase() as string)) {
+
+            if(isFormData) {
+                options.body = params as FormData;
+            } else {
+                options.body = JSON.stringify(params);
+            }
+        } else {
+            url.search = new URLSearchParams(params as Record<string, any>).toString();
+        }
+
+        const response = await fetch(url.toString(), options);
+        response.headers.forEach((value: string, key: string) => headers[key] = value);
+        const json = await response.json();
+
+        // status code error
+        if(!response.ok) {
+            throw new ApiError({
+                code: json.code || 0,
+                statusCode: response.status,
+                message: "Api request error",
+                headers,
+                data: json
+            });
+        }
+
+        return {body: json, response};
+    } catch(e: any) {
+
+        // Network error
+        if(e instanceof TypeError) {
+            if(isBrowser()) {
+                commit('SET_NOTIFICATION', {
+                    type: "danger",
+                    text: "Check your internet connection. No contact)"
+                });
+            }
+        }
+
+        // Api Error instance
+        if(e instanceof ApiError) {
+            const statusCode = e.getStatusCode();
+
+            // Error notification
+            if(statusCode === 400 && options?.error) {
+                commit('SET_NOTIFICATION', {type: "danger", text: e.getData()["error"]});
+            }
+
+            if(statusCode === 404 && options?.error) {
+                if(isBrowser()) {
+                    commit('SET_NOTIFICATION', {
+                        type: "danger",
+                        text: "Something went wrong. We are working hard to fix this)"
+                    });
+                } else {
+                    await dispatch('redirect', {
+                        url: "/404",
+                        code: 307
+                    });
+                }
+            }
+
+            // Redirect (if response code 410)
+            if(options?.method?.toLowerCase() === "get") {
+                if(statusCode === 410) {
+                    const location = e.getHeaders()?.location;
+
+                    if(location) {
+                        await dispatch("redirect", {url: location, code: 307});
+                    }
+                }
+            }
+        }
+
+        throw e;
+    } finally {
+
+        if(options?.preloader) {
+            commit('SET_LOADING', false);
+        }
+
+    }
+}

package/template-vite-vue3-ts/src/frontend/store/index.ts

@@ -0,0 +1,131 @@
+import { createStore } from "vuex";
+import {langLink} from "@/helpers/langLink";
+import {fetchAction} from "./fetch";
+
+import type {Context} from "vite-ssr-vue";
+import type {HeadObject} from "@vueuse/head";
+import type {Options, Breadcrumbs, Notification, FetchPayload} from "./types";
+
+/**
+ * Lang values
+ */
+type Lang = "ru"|"ua";
+
+/**
+ * Base store structure
+ */
+export interface StateBase {
+
+    // Ssr context
+    context: Context,
+
+    // Head Object
+    page: HeadObject,
+
+    // Breadcrumbs
+    way: Array<Breadcrumbs>,
+
+    // Before route - set to new value
+    toLang: Lang,
+
+    // After route set to new value
+    lang: Lang,
+
+    // is data loading
+    loading: boolean
+}
+
+/**
+ * Create store instance
+ * @param opt
+ */
+export default (opt: Options) => createStore({
+    state: () => {
+
+        return {
+            context: {} as Context,
+            page: {},
+            way: [],
+            toLang: "ru",
+            lang: "ru",
+            loading: false,
+        } as StateBase
+    },
+    mutations: {
+        MERGE_CONTEXT(state, context) {
+            Object.assign(state.context, context);
+        },
+        MERGE_CONTEXT_HEADERS(state, headers: Record<string, any>) {
+            state.context.responseHeaders = Object.assign(state.context.responseHeaders || {}, headers);
+        },
+        SET_PAGE(state, page: HeadObject) {
+            state.page = page || {};
+        },
+        SET_WAY(state, way: Array<Breadcrumbs>) {
+            state.way = way || [];
+        },
+        SET_LANG(state, lang: Lang) {
+            state.lang = lang;
+        },
+        SET_TO_LANG(state, lang: Lang) {
+            state.toLang = lang;
+        },
+        SET_LOADING(state, loading: boolean) {
+            state.loading = loading
+        }
+    },
+    getters: {
+        getToLang(state): Lang {
+
+            return state.toLang;
+        },
+        getLang(state): Lang {
+
+            return state.lang;
+        },
+        urlFromLang: state => (url = '/', lang = state.toLang) => langLink(url, lang),
+
+        /**
+         * Get absolute url for requests
+         * @param state
+         */
+        getBaseUrl(state): string {
+
+            return `${state.context.protocol}://${state.context.hostname}`;
+        }
+    },
+    actions: {
+
+        /**
+         * Base fetch data action
+         * @param state
+         * @param payload
+         * @returns
+         */
+        async fetch(
+            state, payload: FetchPayload
+        ): Promise<{body: Record<string, any>, response: Response}> {
+
+            return fetchAction(state, payload);
+        },
+
+        /**
+         * Redirect
+         * @param context
+         * @param url auto transform to multilang
+         * @param query query params
+         * @param code status code for server, when on the client is discarded
+         */
+        async redirect(
+            {state, getters},
+            {url, code, query} : {url: string, code: 301|307, query?:Record<string, any>}
+        ):Promise<void> {
+
+            if(query) {
+                url = url + new URLSearchParams(query as Record<string, any>).toString();
+            }
+
+            await opt.redirect(langLink(url, state.toLang), code || 307);
+        }
+    }
+});

package/template-vite-vue3-ts/src/frontend/store/types.d.ts

@@ -0,0 +1,83 @@
+/**
+ * Fetch payload
+ */
+export declare type FetchPayload  = [
+    params:Record<string, any> | FormData,
+    options?:FetchOptions
+];
+
+/**
+ * Addition fetch options
+ */
+export interface FetchOptions {
+
+    /**
+     * relative url string
+     */
+    url?: string,
+
+    /**
+     * request method
+     */
+    method?: string,
+
+    /**
+     * is need preloader
+     */
+    preloader?: boolean,
+
+    /**
+     * is need error notification
+     */
+    error?: boolean,
+
+    /**
+     * if need compress
+     */
+    compress?: boolean,
+
+    /**
+     * request headers
+     */
+    headers?: Record<string, string>,
+
+    /**
+     * Request body|FormData
+     */
+    body?:string|FormData,
+
+    /**
+     * mege headers to default
+     */
+    mergeHeaders?:Record<string, any>,
+
+    /**
+     * any addition params
+     */
+    [key:string]:any
+}
+
+/**
+ * Notification object
+ */
+export interface Notification {
+    type: string|null,
+    text: string|null,
+    [key: string]: any
+}
+
+/**
+ * Create store options
+ */
+export interface Options {
+    redirect: (url: string, statusCode: 301|307) => Promise<void>,
+    [key:string]:any
+}
+
+/**
+ * Breadcrumbs object
+ */
+export interface Breadcrumbs {
+    test: string,
+    to: string|null|undefined
+}

package/template-vite-vue3-ts/src/frontend/views/Error/Error.vue

@@ -0,0 +1,62 @@
+<template>
+    <div class="error-page">
+        <div class="code">{{code}}</div>
+        <div class="content">Oops. Something went wrong</div>
+        <RouterLink
+            class="go-home"
+            to="/"
+            underline
+        >Go home</RouterLink>
+    </div>
+</template>
+
+<script>
+    import {defineComponent} from "vue";
+    import {mapMutations} from "vuex";
+
+    export default defineComponent({
+        name: "Error",
+        async prefetch({store, isClient}, to, from) {
+            store.commit('SET_PAGE', {
+                title: "Error page. Something went wrong",
+                htmlAttrs: {
+                    lang: "en"
+                }
+            });
+            store.commit("MERGE_CONTEXT", {statusCode: 404});
+        },
+        props: {
+            code: {
+                type: String,
+                default: () => "404"
+            }
+        },
+        created() {
+            this.mergeContext({statusCode: this.code})
+        },
+        methods: {
+            ...mapMutations({
+                mergeContext: 'MERGE_CONTEXT'
+            })
+        }
+    })
+</script>
+
+<style lang="postcss">
+    .error-page {
+        display: flex;
+        flex-basis: 100%;
+        align-items: center;
+        flex-flow: column wrap;
+        .code {
+            font-weight: 400;
+            font-size: 11rem;
+        }
+        .content {
+            font-size: 1.2rem;
+        }
+        .go-home {
+            font-weight: bold;
+        }
+    }
+</style>

package/template-vite-vue3-ts/src/frontend/views/Index/Index.vue

@@ -0,0 +1,27 @@
+<template>
+    <h1 class="index">
+        {{page.h1}}
+    </h1>
+</template>
+
+<script lang="ts">
+    import {defineComponent} from "vue";
+    import {mapState} from "vuex";
+    import {customerPrefetch} from "@/frontend/helpers/customerPrefetch";
+
+    export default defineComponent({
+        name: "Index",
+        components: {
+        },
+        prefetch: customerPrefetch({controller: "Index"}),
+        computed: {
+            ...mapState(["page", "context"]),
+        },
+    })
+</script>
+
+<style lang="postcss">
+    .index {
+        font-size: 18px;
+    }
+</style>

package/template-vite-vue3-ts/src/frontend/views/Index/__tests__/Index.spec.ts

@@ -0,0 +1,31 @@
+import { mount } from "@vue/test-utils";
+import { createRouter, createWebHistory } from "vue-router";
+import Index from "../Index.vue"
+import {createStore} from "vuex";
+
+// https://next.vue-test-utils.vuejs.org/guide/
+describe("Index", () => {
+    const router = createRouter({
+        history: createWebHistory(),
+        routes: [
+            {path: "/", component: {}}
+        ]
+    });
+    const store = createStore({
+        state: {
+            page: {
+                h1: "Test Page"
+            }
+        }
+    })
+
+    it("should display header text", async() => {
+        const wrapper = mount(Index, {
+            global: {
+                plugins: [router, store]
+            }
+        });
+
+        expect(wrapper.html()).toContain("Test Page")
+    })
+});

package/template-vite-vue3-ts/src/frontend/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/template-vite-vue3-ts/src/helpers/langLink.ts

@@ -0,0 +1,17 @@
+/**
+ * For link by lang
+ * @param url
+ * @param lang
+ * @param defaultLang
+ * @returns lang-link
+ */
+export const langLink =  (
+    url: string,
+    lang: string = "ru",
+    defaultLang: string = "ru"
+): string => {
+    url = (url || "").replace(/\/(ru|ua|en)(\/|$)/, '/');
+    const result = (lang === defaultLang ? '' : ('/' + lang)) + url;
+
+    return  result === '/' ? result : result.replace(/\/$/, '');
+}

package/template-vite-vue3-ts/src/helpers/parseLang.ts

@@ -0,0 +1,10 @@
+/**
+ * Parse current lang from url
+ * @param url
+ * @param defaultLang
+ */
+export const parseLang = (url: string, defaultLang = "ru") => {
+    const result = url.match(/^\/(ru|ua|en)\/?/i);
+
+    return result && result.length > 0 ? result[1] : defaultLang;
+}

package/template-vite-vue3-ts/src/scripts/jest.global.setup.ts

@@ -0,0 +1,23 @@
+import {createServer, ViteDevServer} from "vite";
+import fetch from "cross-fetch";
+import {apiUrl} from "./jest.setup";
+
+declare global {
+    var server: ViteDevServer;
+}
+
+export default async(config: Record<string, any>) => {
+    global.server = await createServer();
+    await global.server.listen();
+    await new Promise(resolve => {
+        const interval = setInterval(async() => {
+            try {
+                await fetch(apiUrl);
+                clearInterval(interval);
+                resolve(true);
+            } catch(e) {}
+
+        }, 50);
+    });
+
+}

package/template-vite-vue3-ts/src/scripts/jest.global.teardown.ts

@@ -0,0 +1,10 @@
+import {ViteDevServer} from "vite";
+
+declare global {
+    var server: ViteDevServer;
+}
+
+export default async() => {
+    await new Promise(resolve => setTimeout(resolve, 100));
+    await global.server.close();
+}

package/template-vite-vue3-ts/src/scripts/jest.setup.ts

@@ -0,0 +1,16 @@
+import crossFetch from "cross-fetch";
+import connect from "../../connect.json"
+
+const apiUrl = `http://${connect.server.development.host}:${connect.server.development.vite.port}`;
+const defaultHeaders = {
+    headers: {
+        "user-agent": "fetch-tests",
+        "content-type": "application/json"
+    }
+}
+const fetch = async(
+    input: RequestInfo,
+    init: RequestInit = {}
+) => crossFetch(input, Object.assign({}, defaultHeaders, init));
+
+export {fetch, apiUrl};