@vc-shell/create-vc-app 1.0.174 → 1.0.176

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+## [1.0.176](https://github.com/VirtoCommerce/vc-shell/compare/v1.0.175...v1.0.176) (2024-03-07)
+
+
+
+## [1.0.175](https://github.com/VirtoCommerce/vc-shell/compare/v1.0.174...v1.0.175) (2024-03-07)
+
+
+### Features
+
+* **create-vc-app:** remove redundant and dupe code, decouple mocks, remove demo mode from configs ([2b3fd6b](https://github.com/VirtoCommerce/vc-shell/commit/2b3fd6b945c21b5a3f4a177a7e6a183662eb480d))
+
+
+
 ## [1.0.174](https://github.com/VirtoCommerce/vc-shell/compare/v1.0.173...v1.0.174) (2024-03-06)
 
 

package/dist/index.js

@@ -1,12 +1,46 @@
 #!/usr/bin/env node
-import k from "prompts";
-import N from "mri";
+import $ from "prompts";
+import x from "mri";
 import o from "chalk";
-import i from "node:path";
-import r from "node:fs";
-import { fileURLToPath as $ } from "node:url";
-import { cwd as x, argv as C, exit as F } from "node:process";
-const P = {
+import s from "node:path";
+import i from "node:fs";
+import { fileURLToPath as C } from "node:url";
+import { cwd as N, argv as D, exit as P } from "node:process";
+const F = "@vc-shell/create-vc-app", z = "Application scaffolding", E = "1.0.176", M = "module", R = "./dist/index.js", A = [
+  "dist"
+], O = {
+  build: "vite build && yarn postbuild",
+  postbuild: "shx cp -R src/templates dist/"
+}, V = {
+  "@types/prompts": "^2.4.4",
+  "@vc-shell/ts-config": "^1.0.176",
+  copyfiles: "^2.4.1",
+  "cross-env": "^7.0.3",
+  shx: "^0.3.4",
+  typescript: "^5.3.3"
+}, J = {
+  chalk: "^2.4.2",
+  mri: "^1.2.0",
+  prompts: "^2.4.2",
+  tslib: "^2.5.3",
+  vite: "^5.0.11",
+  "vite-plugin-dts": "^3.6.4"
+}, L = {
+  access: "public",
+  registry: "https://registry.npmjs.org/"
+}, T = "yarn@4.0.2", I = {
+  name: F,
+  description: z,
+  version: E,
+  type: M,
+  bin: R,
+  files: A,
+  scripts: O,
+  devDependencies: V,
+  dependencies: J,
+  publishConfig: L,
+  packageManager: T
+}, k = {
   _gitignore: ".gitignore",
   "_yarnrc.yml": ".yarnrc.yml",
   _browserslistrc: ".browserslistrc",
@@ -17,35 +51,35 @@ const P = {
   _prettierignore: ".prettierignore",
   _prettierrc: ".prettierrc",
   "_eslintrc.js": ".eslintrc.js",
-  _github: "github",
+  _github: ".github",
   _husky: ".husky",
   _vscode: ".vscode",
   _yarn: ".yarn"
 };
-function h(t) {
+function _(t) {
   return /^(?:@[a-z0-9-*~][a-z0-9-*._~]*\/)?[a-z0-9-~][a-z0-9-._~]*$/.test(t);
 }
-function d(t) {
+function f(t) {
   return t.trim().toLowerCase().replace(/\s+/g, "-").replace(/^[._]/, "").replace(/[^a-z0-9-~]+/g, "-");
 }
-function z(t) {
-  r.existsSync(t);
+function U(t) {
+  i.existsSync(t);
 }
-function D(t) {
-  const a = r.readdirSync(t);
-  return a.length === 0 || a.length === 1 && a[0] === ".git";
+function Y(t) {
+  const r = i.readdirSync(t);
+  return r.length === 0 || r.length === 1 && r[0] === ".git";
 }
-function _(t, a) {
-  r.statSync(t).isDirectory() ? E(t, a) : r.copyFileSync(t, a);
+function u(t, r) {
+  i.statSync(t).isDirectory() ? q(t, r) : i.copyFileSync(t, r);
 }
-function E(t, a) {
-  r.mkdirSync(a, { recursive: !0 });
-  for (const n of r.readdirSync(t)) {
-    const m = i.resolve(t, n), c = i.resolve(a, n);
-    _(m, c);
+function q(t, r) {
+  i.mkdirSync(r, { recursive: !0 });
+  for (const n of i.readdirSync(t)) {
+    const y = s.resolve(t, n), m = s.resolve(r, n);
+    u(y, m);
   }
 }
-const O = [
+const B = [
   {
     name: "classic",
     display: "Classic modules boilerplate"
@@ -58,29 +92,36 @@ const O = [
     name: "both",
     display: "Classic modules + Dynamic modules boilerplate"
   }
-], R = {
+], G = {
   both: "variants/both",
   classic: "variants/classic",
   dynamic: "variants/dynamic"
+}, H = {
+  both: ["classic-module", "dynamic-module"],
+  classic: ["classic-module"],
+  dynamic: ["dynamic-module"]
 };
-async function V() {
-  const t = x();
-  let n = N(C.slice(2))._[0];
-  const m = n || "vc-app", c = () => n === "." ? i.basename(i.resolve()) : n;
-  let f;
+async function K() {
+  console.log(`  ${o.bold(o.green(`
+create-vc-app version: ${I.version}
+`))}`);
+  const t = N();
+  let n = x(D.slice(2))._[0];
+  const y = n || "vc-app", m = () => n === "." ? s.basename(s.resolve()) : n;
+  let v;
   try {
-    f = await k(
+    v = await $(
       [
         {
           name: "appName",
           type: n ? null : "text",
           message: o.reset("Project name:"),
-          initial: m,
-          onState: (e) => n = d(String(e.value).trim()) || m,
-          format: (e) => d(String(e).trim())
+          initial: y,
+          onState: (e) => n = f(String(e.value).trim()) || y,
+          format: (e) => f(String(e).trim())
         },
         {
-          type: () => !r.existsSync(n) || D(n) ? null : "confirm",
+          type: () => !i.existsSync(n) || Y(n) ? null : "confirm",
           name: "overwrite",
           message: () => (n === "." ? "Current directory" : `Target directory "${n}"`) + " is not empty. Remove existing files and continue?"
         },
@@ -94,16 +135,16 @@ async function V() {
         },
         {
           name: "packageName",
-          type: () => h(c()) ? null : "text",
+          type: () => _(m()) ? null : "text",
           message: o.reset("Package name:"),
-          initial: () => d(c()),
-          validate: (e) => h(e) || "Invalid package.json name"
+          initial: () => f(m()),
+          validate: (e) => _(e) || "Invalid package.json name"
         },
         {
           type: "select",
           name: "variant",
           message: o.reset("Select module variant:"),
-          choices: O.map((e) => ({
+          choices: B.map((e) => ({
             title: e.display,
             value: e.name
           }))
@@ -116,32 +157,38 @@ async function V() {
       }
     );
   } catch (e) {
-    console.log(e.message), F(1);
+    console.log(e.message), P(1);
   }
-  const { packageName: b, variant: j } = f, s = i.join(t, n);
-  r.existsSync(s) ? z(s) : r.existsSync(s) || r.mkdirSync(s), console.log(`
-Scaffolding app in ${s}...`);
-  const y = i.resolve($(import.meta.url), "..", "templates"), u = (e, l, p) => {
-    const g = i.join(s, P[e] ?? e);
-    p ? r.writeFileSync(g, p) : _(i.join(y, l, e), g);
-  }, v = (e) => {
-    const l = i.resolve(y, e), p = r.readdirSync(l);
-    for (const g of p.filter((w) => w !== "package.json"))
-      u(g, e);
+  const { packageName: w, variant: h } = v, c = s.join(t, n);
+  i.existsSync(c) ? U(c) : i.existsSync(c) || i.mkdirSync(c), console.log(`
+Scaffolding app in ${c}...`);
+  const d = s.resolve(C(import.meta.url), "..", "templates"), b = (e, l, p) => {
+    const a = s.join(c, k[e] ?? e);
+    p ? i.writeFileSync(a, p) : u(s.join(d, l, e), a);
+  }, S = (e) => {
+    const l = s.resolve(d, e), p = i.readdirSync(l);
+    for (const a of p.filter((g) => g !== "package.json"))
+      b(a, e);
   };
-  v("base"), v(R[j]);
-  const S = JSON.parse(r.readFileSync(i.join(y, "./base/package.json"), "utf-8"));
-  if (S.name = b || c(), u("package.json", "", JSON.stringify(S, null, 2) + `
+  S("base"), S(G[h]), H[h].forEach((e) => {
+    const l = s.resolve(d, `modules/${e}`), p = i.readdirSync(l);
+    for (const a of p.filter((g) => g !== "package.json")) {
+      const g = s.join(c, "src", "modules", e, k[a] ?? a);
+      u(s.join(d, `modules/${e}`, a), g);
+    }
+  });
+  const j = JSON.parse(i.readFileSync(s.join(d, "./base/package.json"), "utf-8"));
+  if (j.name = w || m(), b("package.json", "", JSON.stringify(j, null, 2) + `
 `), console.log(`
 Done. You can now run application:
-`), s !== t) {
-    const e = i.relative(t, s);
+`), c !== t) {
+    const e = s.relative(t, c);
     console.log(
       `  ${o.bold(o.green(`cd ${e.includes(" ") ? `"${e}"` : e}`))}`
     );
   }
   console.log(`  ${o.bold(o.green("yarn"))}`), console.log(`  ${o.bold(o.green("yarn serve"))}`);
 }
-V().catch((t) => {
+K().catch((t) => {
   console.error(t);
 });

package/dist/templates/base/package.json

@@ -24,9 +24,9 @@
     "@types/node": "^20.10.5",
     "@typescript-eslint/eslint-plugin": "^6.16.0",
     "@typescript-eslint/parser": "^6.16.0",
-    "@vc-shell/api-client-generator": "^1.0.174",
-    "@vc-shell/release-config": "^1.0.174",
-    "@vc-shell/ts-config": "^1.0.174",
+    "@vc-shell/api-client-generator": "^1.0.176",
+    "@vc-shell/release-config": "^1.0.176",
+    "@vc-shell/ts-config": "^1.0.176",
     "@vitejs/plugin-vue": "^5.0.3",
     "@vue/eslint-config-prettier": "^9.0.0",
     "@vue/eslint-config-typescript": "^12.0.0",
@@ -56,8 +56,8 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.15.3",
-    "@vc-shell/config-generator": "^1.0.174",
-    "@vc-shell/framework": "^1.0.174",
+    "@vc-shell/config-generator": "^1.0.176",
+    "@vc-shell/framework": "^1.0.176",
     "@vueuse/core": "^10.7.1",
     "@vueuse/integrations": "^10.7.1",
     "moment": "^2.30.1",

package/dist/templates/base/src/modules/mocks.ts

@@ -0,0 +1,50 @@
+/* eslint-disable import/no-unresolved */
+import img1 from "/assets/1.jpeg";
+import img2 from "/assets/2.jpg";
+import img3 from "/assets/3.jpg";
+
+export interface MockedItem {
+  imgSrc: string;
+  name: string;
+  createdDate: Date;
+  id: string;
+}
+
+const mockedItems: MockedItem[] = [
+  {
+    imgSrc: img1,
+    name: "Item 1",
+    createdDate: new Date(),
+    id: "item-id-1",
+  },
+  {
+    imgSrc: img2,
+    name: "Item 2",
+    createdDate: new Date(),
+    id: "item-id-2",
+  },
+  {
+    imgSrc: img3,
+    name: "Item 3",
+    createdDate: new Date(),
+    id: "item-id-3",
+  },
+];
+
+export function loadMockItemsList() {
+  return new Promise((resolve: (value: MockedItem[]) => void) => {
+    setTimeout(() => resolve(mockedItems), 1000);
+  }).then((res) => {
+    return { results: res, totalCount: res.length };
+  });
+}
+
+export function loadMockItem(args?: { id: string }) {
+  return new Promise((resolve: (value: MockedItem) => void) => {
+    setTimeout(() => {
+      const findMockedItem = mockedItems.find((x) => x.id === args?.id);
+
+      if (findMockedItem) resolve(findMockedItem);
+    }, 1000);
+  });
+}

package/dist/templates/base/vite.config.mts

@@ -1,16 +1,7 @@
 import { getApplicationConfiguration } from "@vc-shell/config-generator";
 import { VitePWA } from "vite-plugin-pwa";
 
-// Remove it after you added APP_PLATFORM_URL to .env file. Demo mode works only with yarn serve
-const isDemo = !process.env.APP_PLATFORM_URL;
-
-const mode = process.env.APP_ENV as string;
-
 export default getApplicationConfiguration({
-  define: {
-    // Set demo mode
-    __DEMO_MODE__: isDemo,
-  },
   plugins: [
     VitePWA({
       includeAssets: ["favicon.ico", "apple-touch-icon.png"],
@@ -19,7 +10,7 @@ export default getApplicationConfiguration({
         short_name: "App",
         theme_color: "#319ED4",
         display: "fullscreen",
-        start_url: "/",
+        start_url: "/apps/application",
         icons: [
           {
             src: "./img/icons/pwa-192x192.png",

package/dist/templates/modules/classic-module/composables/useDetails/index.ts

@@ -0,0 +1,20 @@
+import { Ref, computed, ref } from "vue";
+import { useAsync, useLoading } from "@vc-shell/framework";
+import { MockedItem, loadMockItem } from "../../../mocks";
+
+export default () => {
+  const item = ref({}) as Ref<MockedItem>;
+
+  // Example mocked method for 'fetching' list data
+  const { loading: itemLoading, action: getItem } = useAsync<{ id: string }>(async (payload) => {
+    item.value = await loadMockItem(payload);
+  });
+
+  const loading = useLoading(itemLoading);
+
+  return {
+    item: computed(() => item.value),
+    loading: computed(() => loading.value),
+    getItem,
+  };
+};

package/dist/templates/modules/classic-module/composables/useList/index.ts

@@ -0,0 +1,25 @@
+import { Ref, computed, ref } from "vue";
+import { useAsync, useLoading } from "@vc-shell/framework";
+import { type MockedItem, loadMockItemsList } from "../../../mocks";
+
+export default () => {
+  const data = ref([]) as Ref<MockedItem[]>;
+  const dataRes = ref();
+
+  // Example mocked method for 'fetching' list data
+  const { loading: itemLoading, action: getItems } = useAsync(async (payload) => {
+    dataRes.value = await loadMockItemsList();
+    data.value = dataRes.value.results;
+  });
+
+  const loading = useLoading(itemLoading);
+
+  return {
+    data: computed(() => data.value),
+    loading: computed(() => loading.value),
+    totalCount: computed(() => dataRes.value?.totalCount),
+    pages: computed(() => Math.ceil(dataRes.value?.totalCount / 20)),
+    currentPage: 0 / Math.max(1, 20) + 1,
+    getItems,
+  };
+};

package/dist/templates/{variants/dynamic/src/modules → modules}/dynamic-module/composables/useDetails/index.ts

@@ -1,9 +1,6 @@
-/* eslint-disable import/no-unresolved */
 import { computed, ref, Ref } from "vue";
-import img1 from "/assets/1.jpeg";
-import img2 from "/assets/2.jpg";
-import img3 from "/assets/3.jpg";
 import { DetailsBaseBladeScope, DynamicBladeForm, IBladeToolbar, useDetailsFactory } from "@vc-shell/framework";
+import { loadMockItem, type MockedItem } from "../../../mocks";
 
 export interface DynamicItemScope extends DetailsBaseBladeScope {
   toolbarOverrides: {
@@ -16,33 +13,9 @@ export default (args: {
   emit: InstanceType<typeof DynamicBladeForm>["$emit"];
   mounted: Ref<boolean>;
 }) => {
-  const factory = useDetailsFactory<{ imgSrc: string; name: string; createdDate: Date; id: string }>({
+  const factory = useDetailsFactory<MockedItem>({
     load: async (payload) => {
-      return await new Promise((resolve) => {
-        setTimeout(() => {
-          const findMockedItem = [
-            {
-              imgSrc: img1,
-              name: "Item 1",
-              createdDate: new Date(),
-              id: "item-id-1",
-            },
-            {
-              imgSrc: img2,
-              name: "Item 2",
-              createdDate: new Date(),
-              id: "item-id-2",
-            },
-            {
-              imgSrc: img3,
-              name: "Item 3",
-              createdDate: new Date(),
-              id: "item-id-3",
-            },
-          ].find((x) => x.id === payload?.id);
-          resolve(findMockedItem);
-        }, 1000);
-      });
+      return await loadMockItem(payload);
     },
     saveChanges: () => {
       throw new Error("Function not implemented.");

package/dist/templates/{variants/both/src/modules → modules}/dynamic-module/composables/useList/index.ts

@@ -1,16 +1,6 @@
-/* eslint-disable import/no-unresolved */
 import { computed, ref, Ref } from "vue";
-import img1 from "/assets/1.jpeg";
-import img2 from "/assets/2.jpg";
-import img3 from "/assets/3.jpg";
 import { DynamicBladeList, ListBaseBladeScope, useBladeNavigation, useListFactory } from "@vc-shell/framework";
-
-interface MockedItem {
-  imgSrc: string;
-  name: string;
-  createdDate: Date;
-  id: string;
-}
+import { loadMockItemsList } from "../../../mocks";
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 export interface DynamicItemsScope extends ListBaseBladeScope {}
@@ -22,34 +12,7 @@ export default (args: {
 }) => {
   const factory = useListFactory({
     load: async () => {
-      return await new Promise((resolve: (value: MockedItem[]) => void) => {
-        setTimeout(
-          () =>
-            resolve([
-              {
-                imgSrc: img1,
-                name: "Item 1",
-                createdDate: new Date(),
-                id: "item-id-1",
-              },
-              {
-                imgSrc: img2,
-                name: "Item 2",
-                createdDate: new Date(),
-                id: "item-id-2",
-              },
-              {
-                imgSrc: img3,
-                name: "Item 3",
-                createdDate: new Date(),
-                id: "item-id-3",
-              },
-            ]),
-          1000,
-        );
-      }).then((res) => {
-        return { results: res, totalCount: res.length };
-      });
+      return await loadMockItemsList();
     },
     remove: () => {
       throw new Error("Function not implemented.");

package/dist/templates/variants/both/src/main.ts

@@ -14,9 +14,8 @@ import "roboto-fontface/css/roboto/roboto-fontface.css";
 import "@vc-shell/framework/dist/index.css";
 
 async function startApp() {
-  /** !!! uncomment these lines when adding APP_PLATFORM_URL in .env */
-  // const { loadUser } = useUser();
-  // await loadUser();
+  const { loadUser } = useUser();
+  await loadUser();
 
   const { currentLocale, setLocale } = useLanguages();
 

package/dist/templates/variants/classic/src/main.ts

@@ -13,9 +13,8 @@ import "roboto-fontface/css/roboto/roboto-fontface.css";
 import "@vc-shell/framework/dist/index.css";
 
 async function startApp() {
-  /** !!! uncomment these lines when adding APP_PLATFORM_URL in .env */
-  // const { loadUser } = useUser();
-  // await loadUser();
+  const { loadUser } = useUser();
+  await loadUser();
 
   const { currentLocale, setLocale } = useLanguages();
 

package/dist/templates/variants/dynamic/src/main.ts

@@ -13,9 +13,8 @@ import "roboto-fontface/css/roboto/roboto-fontface.css";
 import "@vc-shell/framework/dist/index.css";
 
 async function startApp() {
-  /** !!! uncomment these lines when adding APP_PLATFORM_URL in .env */
-  // const { loadUser } = useUser();
-  // await loadUser();
+  const { loadUser } = useUser();
+  await loadUser();
 
   const { currentLocale, setLocale } = useLanguages();
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vc-shell/create-vc-app",
   "description": "Application scaffolding",
-  "version": "1.0.174",
+  "version": "1.0.176",
   "type": "module",
   "bin": "./dist/index.js",
   "files": [
@@ -13,7 +13,7 @@
   },
   "devDependencies": {
     "@types/prompts": "^2.4.4",
-    "@vc-shell/ts-config": "^1.0.174",
+    "@vc-shell/ts-config": "^1.0.176",
     "copyfiles": "^2.4.1",
     "cross-env": "^7.0.3",
     "shx": "^0.3.4",

package/dist/templates/variants/both/src/modules/classic-module/composables/useDetails/index.ts

@@ -1,54 +0,0 @@
-/* eslint-disable import/no-unresolved */
-import { Ref, computed, ref } from "vue";
-import img1 from "/assets/1.jpeg";
-import img2 from "/assets/2.jpg";
-import img3 from "/assets/3.jpg";
-import { useAsync, useLoading } from "@vc-shell/framework";
-
-export default () => {
-  const item = ref({}) as Ref<{
-    imgSrc: string;
-    name: string;
-    createdDate: Date;
-    id: string;
-  }>;
-
-  // Example mocked method for 'fetching' list data
-  const { loading: itemLoading, action: getItem } = useAsync<{ id: string }>(async (payload) => {
-    item.value = await new Promise((resolve) => {
-      setTimeout(() => {
-        const findMockedItem = [
-          {
-            imgSrc: img1,
-            name: "Item 1",
-            createdDate: new Date(),
-            id: "item-id-1",
-          },
-          {
-            imgSrc: img2,
-            name: "Item 2",
-            createdDate: new Date(),
-            id: "item-id-2",
-          },
-          {
-            imgSrc: img3,
-            name: "Item 3",
-            createdDate: new Date(),
-            id: "item-id-3",
-          },
-        ].find((x) => x.id === payload?.id);
-        if (findMockedItem) {
-          resolve(findMockedItem);
-        }
-      }, 1000);
-    });
-  });
-
-  const loading = useLoading(itemLoading);
-
-  return {
-    item: computed(() => item.value),
-    loading: computed(() => loading.value),
-    getItem,
-  };
-};

package/dist/templates/variants/both/src/modules/classic-module/composables/useList/index.ts

@@ -1,58 +0,0 @@
-/* eslint-disable import/no-unresolved */
-import { Ref, computed, ref } from "vue";
-import img1 from "/assets/1.jpeg";
-import img2 from "/assets/2.jpg";
-import img3 from "/assets/3.jpg";
-import { useAsync, useLoading } from "@vc-shell/framework";
-
-export default () => {
-  const data = ref([]) as Ref<
-    {
-      imgSrc: string;
-      name: string;
-      createdDate: Date;
-      id: string;
-    }[]
-  >;
-
-  // Example mocked method for 'fetching' list data
-  const { loading: itemLoading, action: getItems } = useAsync(async (payload) => {
-    data.value = await new Promise((resolve) => {
-      setTimeout(
-        () =>
-          resolve([
-            {
-              imgSrc: img1,
-              name: "Item 1",
-              createdDate: new Date(),
-              id: "item-id-1",
-            },
-            {
-              imgSrc: img2,
-              name: "Item 2",
-              createdDate: new Date(),
-              id: "item-id-2",
-            },
-            {
-              imgSrc: img3,
-              name: "Item 3",
-              createdDate: new Date(),
-              id: "item-id-3",
-            },
-          ]),
-        1000,
-      );
-    });
-  });
-
-  const loading = useLoading(itemLoading);
-
-  return {
-    data: computed(() => data.value),
-    loading: computed(() => loading.value),
-    totalCount: computed(() => data.value.length),
-    pages: computed(() => Math.ceil(data.value.length / 20)),
-    currentPage: 0 / Math.max(1, 20) + 1,
-    getItems,
-  };
-};