@vc-shell/create-vc-app 2.0.0-alpha.9 → 2.0.0

package/dist/templates/dynamic-module/vite.config.mts.ejs

@@ -1,3 +1,3 @@
-import { getDynamicModuleConfiguration } from "@vc-shell/config-generator";
+import { getDynamicModuleConfiguration } from "@vc-shell/mf-module";
 
 export default getDynamicModuleConfiguration();

package/dist/templates/host-app/_package.json.ejs

@@ -14,27 +14,27 @@
     "generate-api-client": "cross-env api-client-generator --APP_PLATFORM_MODULES='[]' --APP_API_CLIENT_DIRECTORY=./src/api_client/ --APP_OUT_DIR=dist --APP_PACKAGE_NAME=api --APP_PACKAGE_VERSION=$npm_package_version"
   },
   "devDependencies": {
-    "@commitlint/cli": "^18.4.3",
-    "@commitlint/config-conventional": "^18.4.3",
+    "@commitlint/cli": "^20.4.1",
+    "@commitlint/config-conventional": "^20.4.1",
     "@laynezh/vite-plugin-lib-assets": "^0.5.13",
     "@rollup/plugin-typescript": "^11.1.5",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^20.10.5",
     "@typescript-eslint/eslint-plugin": "^7.4.0",
     "@typescript-eslint/parser": "^7.4.0",
-    "@vc-shell/api-client-generator": "^2.0.0-alpha.9",
-    "@vc-shell/ts-config": "^2.0.0-alpha.9",
+    "@vc-shell/api-client-generator": "^2.0.0-alpha.35",
+    "@vc-shell/ts-config": "^2.0.0-alpha.35",
     "@vitejs/plugin-vue": "^5.2.3",
-    "@vue/eslint-config-prettier": "^9.0.0",
-    "@vue/eslint-config-typescript": "^13.0.0",
+    "@vue/eslint-config-prettier": "^10.2.0",
+    "@vue/eslint-config-typescript": "^14.6.0",
     "autoprefixer": "^10.4.16",
     "conventional-changelog-cli": "^5.0.0",
     "cross-env": "^7.0.3",
-    "eslint": "^8.57.0",
+    "eslint": "^9.35.0",
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-vue": "^9.19.2",
+    "eslint-plugin-vue": "^10.4.0",
     "husky": "^8.0.3",
     "lint-staged": "^15.2.0",
     "lodash-es": "^4.17.21",
@@ -45,21 +45,19 @@
     "tsx": "^4.7.1",
     "typescript": "^5.8.3",
     "vite": "^6.3.3",
-    "vite-plugin-checker": "^0.9.1",
+    "vite-plugin-checker": "^0.13.0",
     "vite-plugin-mkcert": "^1.17.1",
     "vue-eslint-parser": "^9.3.2",
-    "vue-tsc": "^2.2.10"
+    "vue-tsc": "^3.2.5"
   },
   "dependencies": {
-    "@vc-shell/config-generator": "^2.0.0-alpha.9",
-    "@vc-shell/framework": "^2.0.0-alpha.9",
+    "@vc-shell/config-generator": "^2.0.0-alpha.35",
+    "@vc-shell/framework": "^2.0.0-alpha.35",
     "@vueuse/core": "^10.7.1",
     "@vueuse/integrations": "^10.7.1",
-    "cross-spawn": "^7.0.3",
-    "moment": "^2.30.1",
     "vee-validate": "^4.12.4",
-    "vue": "^3.5.13",
-    "vue-router": "^4.2.5"
+    "vue": "^3.5.30",
+    "vue-router": "^5.0.3"
   },
   "lint-staged": {
     "*.{js,ts,html,css}": "prettier --write '**/*.{ts,vue}'",

package/dist/templates/host-app/src/main.ts.ejs

@@ -16,24 +16,26 @@ async function startApp() {
     console.log(e);
   }
 
-  const app = createApp(RouterView)
-    .use(VirtoShellFramework, {
-      router,
-      i18n: {
-        locale: import.meta.env.APP_I18N_LOCALE,
-        fallbackLocale: import.meta.env.APP_I18N_FALLBACK_LOCALE,
-      },
+  const { currentLocale, setLocale } = useLanguages();
+
+  const app = createApp(RouterView);
+
+  app.use(VirtoShellFramework, {
+    router,
+    i18n: {
+      locale: import.meta.env.APP_I18N_LOCALE,
+      fallbackLocale: import.meta.env.APP_I18N_FALLBACK_LOCALE,
+    },
 <% if (aiAgent) { %>
-      aiAgent: {
-        config: {
-          url: import.meta.env.APP_AI_AGENT_URL,
-        },
+    aiAgent: {
+      config: {
+        url: import.meta.env.APP_AI_AGENT_URL,
       },
+    },
 <% } %>
-    })
-    .use(router);
+  });
 
-  const { currentLocale, setLocale } = app.runWithContext(() => useLanguages());
+  app.use(router);
 
   bootstrap(app);
 
@@ -43,7 +45,7 @@ async function startApp() {
 
   setLocale(currentLocale.value);
 
-  app.config.errorHandler = (err) => {
+  app.config.errorHandler = (err: unknown) => {
     notification.error((err as Error).toString(), {
       timeout: 5000,
     });

package/dist/templates/host-app/src/router/routes.ts.ejs

@@ -43,15 +43,6 @@ export const routes: RouteRecordRaw[] = [
         }),
       },
     ],
-<% if (tenantRoutes) { %>
-    beforeEnter: (to) => {
-      const { tenantId } = to.params;
-      if (!tenantId || new RegExp(tenantIdRegex).test(tenantId as string)) {
-        return true;
-      }
-      return { path: "/" };
-    },
-<% } %>
   },
   {
     name: "Login",

package/dist/templates/host-app/tsconfig.json

@@ -6,6 +6,7 @@
     "rootDir": "src",
     "types": [
       "vite/client",
+      "@vc-shell/framework/globals"
       ]
   },
   "include": [

package/dist/templates/host-app/vite.config.mts.ejs

@@ -1,7 +1,4 @@
-import { getApplicationConfiguration, getHostFederationConfig } from "@vc-shell/config-generator";
-import { mergeConfig } from "vite";
+import { getApplicationConfiguration } from "@vc-shell/config-generator";
+import { mfHostConfig } from "@vc-shell/mf-host/vite";
 
-export default mergeConfig(
-  getApplicationConfiguration(),
-  getHostFederationConfig(),
-);
+export default getApplicationConfiguration(mfHostConfig());

package/dist/templates/module/composables/useDetails.ts.ejs

@@ -1,38 +1,41 @@
-import { ref } from "vue";
-import { useAsync, useLoading } from "@vc-shell/framework";
-
-export default function use<%- ModuleNamePascalCase %>Details() {
-  const item = ref<Record<string, unknown>>({});
-
-  const { loading: itemLoading, action: fetchItem } = useAsync(async (id?: string) => {
-    // TODO: Replace with real API call
-    // const result = await apiClient.getById(id);
-    // item.value = result;
-  });
-
-  const { loading: saveLoading, action: saveAction } = useAsync(async () => {
-    // TODO: Replace with real API call
-    // if (item.value.id) {
-    //   await apiClient.update(item.value);
-    // } else {
-    //   await apiClient.create(item.value);
-    // }
-  });
-
-  const loading = useLoading(itemLoading, saveLoading);
-
-  async function getItem(id: string) {
-    await fetchItem(id);
-  }
-
-  async function saveItem() {
-    await saveAction();
-  }
-
-  return {
-    item,
-    loading,
-    getItem,
-    saveItem,
-  };
-}
+import { ref } from "vue";
+import { useAsync, useLoading, useModificationTracker } from "@vc-shell/framework";
+
+export default function use<%- ModuleNamePascalCase %>Details() {
+  const item = ref<Record<string, any>>({});
+  const { isModified, resetModificationState } = useModificationTracker(item);
+
+  const { loading: itemLoading, action: fetchItem } = useAsync(async (id?: string) => {
+    // TODO: Replace with real API call
+    // const result = await apiClient.getById(id);
+    // item.value = result;
+  });
+
+  const { loading: saveLoading, action: saveAction } = useAsync(async () => {
+    // TODO: Replace with real API call
+    // if (item.value.id) {
+    //   await apiClient.update(item.value);
+    // } else {
+    //   await apiClient.create(item.value);
+    // }
+  });
+
+  const loading = useLoading(itemLoading, saveLoading);
+
+  async function getItem(id: string) {
+    await fetchItem(id);
+  }
+
+  async function saveItem() {
+    await saveAction();
+  }
+
+  return {
+    item,
+    loading,
+    getItem,
+    saveItem,
+    isModified,
+    resetModificationState,
+  };
+}

package/dist/templates/module/index.ts.ejs

@@ -1,8 +1,11 @@
-import * as pages from "./pages";
-import * as locales from "./locales";
-import { createAppModule } from "@vc-shell/framework";
-
-export default createAppModule(pages, locales);
-
-export * from "./pages";
-export * from "./composables";
+import * as blades from "./pages";
+import * as locales from "./locales";
+import { defineAppModule } from "@vc-shell/framework";
+
+export default defineAppModule({
+  blades,
+  locales,
+});
+
+export * from "./pages";
+export * from "./composables";

package/dist/templates/module/locales/en.json.ejs

@@ -1,22 +1,33 @@
-{
-  "<%- ModuleNameScreamingSnake %>": {
-    "MENU": {
-      "TITLE": "<%- ModuleNameSentenceCase %>"
-    },
-    "PAGES": {
-      "LIST": {
-        "TITLE": "<%- ModuleNameSentenceCase %>",
-        "TOOLBAR": {
-          "REFRESH": "Refresh",
-          "ADD": "Add"
-        }
-      },
-      "DETAILS": {
-        "TITLE": "<%- ModuleNameSentenceCase %> Details"
-      },
-      "ALERTS": {
-        "CLOSE_CONFIRMATION": "You have unsaved changes. Close anyway?"
-      }
-    }
-  }
-}
+{
+  "<%- ModuleNameScreamingSnake %>": {
+    "MENU": {
+      "TITLE": "<%- ModuleNameSentenceCase %>"
+    },
+    "PAGES": {
+      "LIST": {
+        "TITLE": "<%- ModuleNameSentenceCase %>",
+        "COLUMNS": {
+          "NAME": "Name",
+          "CREATED_DATE": "Created"
+        },
+        "TOOLBAR": {
+          "REFRESH": "Refresh",
+          "ADD": "Add"
+        }
+      },
+      "DETAILS": {
+        "TITLE": "<%- ModuleNameSentenceCase %> Details",
+        "TITLE_NEW": "New <%- ModuleNameSentenceCase %>",
+        "FIELDS": {
+          "NAME": "Name"
+        },
+        "TOOLBAR": {
+          "SAVE": "Save"
+        }
+      }
+    },
+    "ALERTS": {
+      "CLOSE_CONFIRMATION": "You have unsaved changes. Are you sure you want to close?"
+    }
+  }
+}

package/dist/templates/module/pages/details.vue.ejs

@@ -1,111 +1,83 @@
-<template>
-  <VcBlade
-    :title="title"
-    :toolbar-items="bladeToolbar"
-    :loading="loading"
-    :expanded="expanded"
-    :closable="closable"
-    width="70%"
-    @close="$emit('close:blade')"
-    @expand="$emit('expand:blade')"
-    @collapse="$emit('collapse:blade')"
-  >
-    <VcContainer>
-      <VcForm>
-        <!-- Add your form fields here -->
-        <VcInput
-          v-model="item.name"
-          :label="'Name'"
-          required
-        />
-      </VcForm>
-    </VcContainer>
-  </VcBlade>
-</template>
-
-<script setup lang="ts">
-import {
-  VcBlade,
-  VcContainer,
-  VcForm,
-  VcInput,
-  useBladeNavigation,
-  useModificationTracker,
-  usePopup,
-  useBeforeUnload,
-  type IBladeToolbar,
-  type IParentCallArgs,
-} from "@vc-shell/framework";
-import { ref, computed, onMounted } from "vue";
-import use<%- ModuleNamePascalCase %>Details from "../composables/useDetails";
-
-export interface Props {
-  expanded?: boolean;
-  closable?: boolean;
-  param?: string;
-}
-
-export interface Emits {
-  (event: "parent:call", args: IParentCallArgs): void;
-  (event: "collapse:blade"): void;
-  (event: "expand:blade"): void;
-  (event: "close:blade"): void;
-}
-
-defineOptions({
-  url: "/<%- ModuleName %>-details",
-  name: "<%- ModuleNamePascalCase %>Details",
-});
-
-const props = withDefaults(defineProps<Props>(), {
-  expanded: true,
-  closable: true,
-  param: undefined,
-});
-
-const emit = defineEmits<Emits>();
-
-const { onBeforeClose } = useBladeNavigation();
-const { showConfirmation } = usePopup();
-
-const { item, loading, getItem, saveItem } = use<%- ModuleNamePascalCase %>Details();
-const { isModified, resetModificationState } = useModificationTracker(item);
-
-const title = computed(() => {
-  return props.param
-    ? String(item.value?.name || "<%- ModuleNameSentenceCase %> Details")
-    : "New <%- ModuleNameSentenceCase %>";
-});
-
-const bladeToolbar = ref<IBladeToolbar[]>([
-  {
-    id: "save",
-    title: "Save",
-    icon: "lucide-save",
-    disabled: computed(() => !isModified.value),
-    async clickHandler() {
-      await saveItem();
-      resetModificationState();
-      emit("parent:call", { method: "reload" });
-    },
-  },
-]);
-
-onMounted(async () => {
-  if (props.param) {
-    await getItem(props.param);
-  }
-});
-
-onBeforeClose(async () => {
-  if (isModified.value) {
-    return await showConfirmation("You have unsaved changes. Are you sure you want to close?");
-  }
-});
-
-useBeforeUnload(computed(() => isModified.value));
-
-defineExpose({
-  title,
-});
-</script>
+<template>
+  <VcBlade
+    :title="title"
+    :toolbar-items="bladeToolbar"
+    :loading="loading"
+    width="70%"
+  >
+    <VcContainer>
+      <VcForm>
+        <!-- Add your form fields here -->
+        <VcInput
+          v-model="item.name"
+          :label="$t('<%- ModuleNameScreamingSnake %>.PAGES.DETAILS.FIELDS.NAME')"
+          required
+        />
+      </VcForm>
+    </VcContainer>
+  </VcBlade>
+</template>
+
+<script setup lang="ts">
+import {
+  VcBlade,
+  VcContainer,
+  VcForm,
+  VcInput,
+  useBlade,
+  useModificationTracker,
+  usePopup,
+  useBeforeUnload,
+  type IBladeToolbar,
+} from "@vc-shell/framework";
+import { ref, computed, onMounted } from "vue";
+import use<%- ModuleNamePascalCase %>Details from "../composables/useDetails";
+import { useI18n } from "vue-i18n";
+
+defineBlade({
+  url: "/<%- ModuleName %>-details",
+  name: "<%- ModuleNamePascalCase %>Details",
+});
+
+const { t } = useI18n({ useScope: "global" });
+const { param, closeSelf, callParent, onBeforeClose } = useBlade();
+
+const { showConfirmation } = usePopup();
+
+const { item, loading, getItem, saveItem, isModified, resetModificationState } = use<%- ModuleNamePascalCase %>Details();
+
+const title = computed(() => {
+  return param.value
+    ? String(item.value?.name || t("<%- ModuleNameScreamingSnake %>.PAGES.DETAILS.TITLE"))
+    : t("<%- ModuleNameScreamingSnake %>.PAGES.DETAILS.TITLE_NEW");
+});
+
+const bladeToolbar = ref<IBladeToolbar[]>([
+  {
+    id: "save",
+    title: t("<%- ModuleNameScreamingSnake %>.PAGES.DETAILS.TOOLBAR.SAVE"),
+    icon: "lucide-save",
+    disabled: computed(() => !isModified.value),
+    async clickHandler() {
+      await saveItem();
+      resetModificationState();
+      callParent("reload");
+    },
+  },
+]);
+
+onMounted(async () => {
+  if (param.value) {
+    await getItem(param.value);
+  }
+});
+
+onBeforeClose(async () => {
+  if (isModified.value) {
+    return !(await showConfirmation(t("<%- ModuleNameScreamingSnake %>.ALERTS.CLOSE_CONFIRMATION")));
+  }
+  return false;
+});
+
+useBeforeUnload(computed(() => isModified.value));
+</script>