@bardioc/create-bardioc-app 0.5.5 → 0.5.8

package/templates/vite/vite.config.ts

@@ -1,17 +1,25 @@
 import { bardiocApp, bardiocDevAuth } from '@bardioc/app-sdk/vite';
-import react from '@vitejs/plugin-react';
 import tailwindcss from '@tailwindcss/vite';
+import react from '@vitejs/plugin-react';
 import { defineConfig, loadEnv } from 'vite';
 
+const DEFAULT_PORT = {{PORT}};
+
 export default defineConfig(({ mode }) => {
   const env = loadEnv(mode, __dirname, '');
   const appName = env.VITE_APP_NAME?.trim();
+  const port = Number(env.LOCALHOST_PORT) || DEFAULT_PORT;
 
   if (!appName) {
     throw new Error('Missing VITE_APP_NAME for Vite config');
   }
 
   return {
-    plugins: [bardiocDevAuth({ appName }), react(), bardiocApp({ appName, port: {{PORT}} }), tailwindcss()],
+    plugins: [
+      bardiocDevAuth({ appName }),
+      react(),
+      bardiocApp({ appName, port }),
+      tailwindcss(),
+    ],
   };
 });

package/templates/vue/.env.example

@@ -7,3 +7,6 @@ DEV_SECRET=
 
 # Base URL of the Bardioc BFF / backend-for-frontend (e.g. https://your-host).
 API_BASE_URL=
+
+# By default, the app will start on port {{PORT}}. Feel free to uncomment the following variable and change it to match your local setup preferences.
+#LOCALHOST_PORT={{PORT}}

package/templates/vue/_gitignore

@@ -4,3 +4,4 @@ dist
 node_modules
 *.zip
 .linked/
+.DS_Store

package/templates/vue/eslint.config.mjs

@@ -0,0 +1,3 @@
+import { createBaseConfig } from '@bardioc/configs/eslint/base';
+
+export default [...createBaseConfig()];

package/templates/vue/package.json

@@ -5,25 +5,30 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "dev:live": "BARDIOC_TUNNEL=1 vite",
     "build": "vue-tsc -b && vite build && node scripts/stamp-manifest.mjs dist",
     "bundle": "vue-tsc -b && vite build && node scripts/stamp-manifest.mjs dist && cd dist && zip -r ../{{APP_NAME}}.zip .",
     "preview": "vite preview",
     "check-types": "vue-tsc --noEmit",
+    "lint": "eslint .",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
     "changeset": "changeset",
     "release:status": "changeset status --verbose",
     "release:version": "changeset version && npm install",
     "release:publish": "changeset publish"
   },
   "dependencies": {
-    "@bardioc/app-sdk": "latest",
+    "@bardioc/app-sdk": "^0.5.0",
     "vue": "^3.5.16"
   },
   "devDependencies": {
+    "@bardioc/configs": "0.2.1",
     "@changesets/cli": "^2.31.0",
     "@tailwindcss/vite": "^4.3.0",
     "@types/node": "^22.19.19",
-    "@vitejs/plugin-vue": "^5.2.4",
+    "@vitejs/plugin-vue": "^6.0.8",
+    "eslint": "^10.0.0",
+    "prettier": "^3.6.2",
     "tailwindcss": "4.3.0",
     "typescript": "6.0.3",
     "vite": "8.0.13",

package/templates/vue/prettier.config.mjs

@@ -0,0 +1 @@
+export { default } from '@bardioc/configs/prettier';

package/templates/vue/src/App.vue

@@ -23,13 +23,13 @@ async function runGetProfile() {
   result.value = { status: 'loading', request };
 
   const startTime = Date.now();
-  notify('Getting user profile', 'info');
+  notify('Getting user profile…', 'info');
 
   try {
     const data = await bridge.transport.os.profile.get();
 
     const duration = Date.now() - startTime;
-    notify(`Profile loaded (${duration}ms)`, 'success');
+    notify(`Profile loaded (${duration}ms).`, 'success');
     result.value = { status: 'success', request, data };
   } catch (err) {
     const message = err instanceof Error ? err.message : String(err);
@@ -41,7 +41,7 @@ async function runGetProfile() {
 }
 
 function handleNotify() {
-  notify('Hello from {{DISPLAY_NAME}}', 'info');
+  notify('Hello from {{DISPLAY_NAME}}.', 'info');
   result.value = {
     status: 'success',
     request: 'SDK_NOTIFY',
@@ -55,7 +55,7 @@ function clearResult() {
 </script>
 
 <template>
-  <div class="bg-background text-foreground min-h-screen">
+  <div class="bg-background text-foreground @container/app min-h-screen">
     <template v-if="showSdkDemo">
       <div class="mx-auto flex min-h-screen w-full max-w-3xl flex-col gap-3 p-4">
         <div class="flex flex-col gap-1">
@@ -110,7 +110,7 @@ function clearResult() {
             <div class="text-muted-foreground border-border border-b pb-2 font-mono text-xs">
               {{ result.request }}
             </div>
-            <div class="text-destructive whitespace-pre-wrap break-all">{{ result.message }}</div>
+            <div class="text-destructive break-all whitespace-pre-wrap">{{ result.message }}</div>
           </div>
           <div
             v-else-if="result.status === 'success'"
@@ -132,7 +132,7 @@ function clearResult() {
       <div class="mx-auto flex min-h-screen w-full max-w-3xl flex-col gap-4 p-4">
         <h1 class="m-0 text-2xl font-semibold">Hello Bardioc App</h1>
         <p class="text-muted-foreground m-0 max-w-2xl text-xs leading-5">
-          Open this app inside Bardioc OS to use transport requests and send host notifications.
+          Open this app inside Bardioc to use transport requests and send host notifications.
         </p>
         <div class="border-border bg-muted/20 rounded-xl border p-3 text-xs leading-5">
           Outside the host iframe this page is only a local preview shell.

package/templates/vue/tsconfig.json

@@ -1,22 +1,18 @@
 {
+  "extends": "@bardioc/configs/typescript/base.json",
   "compilerOptions": {
-    "target": "ES2022",
-    "useDefineForClassFields": true,
+    "declaration": false,
+    "declarationMap": false,
     "module": "ESNext",
-    "lib": ["ES2022", "DOM", "DOM.Iterable"],
-    "skipLibCheck": true,
     "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "isolatedModules": true,
-    "moduleDetection": "force",
     "noEmit": true,
+    "useDefineForClassFields": true,
+    "allowImportingTsExtensions": true,
     "jsx": "preserve",
-    "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true,
-    "ignoreDeprecations": "6.0",
     "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"]

package/templates/vue/vite.config.ts

@@ -1,17 +1,25 @@
 import { bardiocApp, bardiocDevAuth } from '@bardioc/app-sdk/vite';
-import vue from '@vitejs/plugin-vue';
 import tailwindcss from '@tailwindcss/vite';
+import vue from '@vitejs/plugin-vue';
 import { defineConfig, loadEnv } from 'vite';
 
+const DEFAULT_PORT = {{PORT}};
+
 export default defineConfig(({ mode }) => {
   const env = loadEnv(mode, __dirname, '');
   const appName = env.VITE_APP_NAME?.trim();
+  const port = Number(env.LOCALHOST_PORT) || DEFAULT_PORT;
 
   if (!appName) {
     throw new Error('Missing VITE_APP_NAME for Vite config');
   }
 
   return {
-    plugins: [bardiocDevAuth({ appName }), vue(), bardiocApp({ appName, port: {{PORT}} }), tailwindcss()],
+    plugins: [
+      bardiocDevAuth({ appName }),
+      vue(),
+      bardiocApp({ appName, port }),
+      tailwindcss(),
+    ],
   };
 });

package/templates/angular/scripts/dev-auth-proxy.mjs

@@ -1,91 +0,0 @@
-#!/usr/bin/env node
-
-import { readFileSync } from 'node:fs';
-import { createServer } from 'node:http';
-import { dirname, join, resolve } from 'node:path';
-import { fileURLToPath } from 'node:url';
-import { createDevAuthProxyHandler } from '@bardioc/app-sdk/dev-proxy';
-
-const __dirname = dirname(fileURLToPath(import.meta.url));
-const projectRoot = resolve(__dirname, '..');
-const appPort = readAppPort();
-const proxyPort = appPort + 100;
-const env = loadEnv(projectRoot);
-
-if (!env.DEV_SECRET || !env.API_BASE_URL) {
-  process.stderr.write('[bardioc-dev-auth-proxy] missing DEV_SECRET or API_BASE_URL, proxy disabled\n');
-  await new Promise(() => {});
-}
-
-const handler = createDevAuthProxyHandler({
-  apiBaseUrl: env.API_BASE_URL,
-  devSecret: env.DEV_SECRET,
-  allowOrigin: '*',
-});
-
-const server = createServer((req, res) => {
-  void handler(req, res);
-});
-
-server.listen(proxyPort, '127.0.0.1', () => {
-  process.stdout.write(`[bardioc-dev-auth-proxy] listening on http://127.0.0.1:${proxyPort}/rest\n`);
-});
-
-for (const signal of ['SIGINT', 'SIGTERM']) {
-  process.on(signal, () => {
-    server.close(() => process.exit(0));
-  });
-}
-
-function readAppPort() {
-  const flagIndex = process.argv.indexOf('--app-port');
-  const raw = flagIndex >= 0 ? process.argv[flagIndex + 1] : undefined;
-  const parsed = Number.parseInt(raw ?? '{{PORT}}', 10);
-  return Number.isFinite(parsed) ? parsed : {{PORT}};
-}
-
-function loadEnv(projectDir) {
-  const result = {};
-
-  for (const fileName of ['.env', '.env.local']) {
-    const filePath = join(projectDir, fileName);
-
-    try {
-      Object.assign(result, parseEnv(readFileSync(filePath, 'utf8')));
-    } catch {
-      // Ignore missing env files.
-    }
-  }
-
-  return result;
-}
-
-function parseEnv(source) {
-  const result = {};
-
-  for (const rawLine of source.split(/\r?\n/)) {
-    const line = rawLine.trim();
-    if (!line || line.startsWith('#')) {
-      continue;
-    }
-
-    const equalsIndex = line.indexOf('=');
-    if (equalsIndex <= 0) {
-      continue;
-    }
-
-    const key = line.slice(0, equalsIndex).trim();
-    let value = line.slice(equalsIndex + 1).trim();
-
-    if (
-      (value.startsWith('"') && value.endsWith('"')) ||
-      (value.startsWith("'") && value.endsWith("'"))
-    ) {
-      value = value.slice(1, -1);
-    }
-
-    result[key] = value;
-  }
-
-  return result;
-}