create-portfoliable 1.2.17 → 1.3.0

package/bin/create-portfoliable.mjs

@@ -16,6 +16,7 @@ import {
   readProjectUiPreferences,
   writeProjectUiPreferences
 } from '../scripts/terminal-ui.mjs';
+import { findPackageUpdates } from '../scripts/package-updates.mjs';
 
 // MARK: DEFAULTS
 // Defines default target folder when no project name is provided.
@@ -385,6 +386,24 @@ async function run() {
   printRailSegment({ dot: true, label: `${color('32', 'Dependencies installed.')}` });
   console.log(color('36', 'Command guide is available after launch via interactive prompt.'));
 
+  const installedPackages = [
+    ['create-portfoliable', path.resolve(targetDir, 'node_modules', 'create-portfoliable', 'package.json')],
+    ['@portfoliablejs/valence', path.resolve(targetDir, 'node_modules', '@portfoliablejs', 'valence', 'package.json')]
+  ].flatMap(([name, packagePath]) => {
+    try {
+      return [{ name, currentVersion: JSON.parse(fs.readFileSync(packagePath, 'utf8')).version }];
+    } catch {
+      return [];
+    }
+  });
+  const updates = await findPackageUpdates(installedPackages);
+  for (const update of updates) {
+    const isValence = update.name === '@portfoliablejs/valence';
+    const label = isValence ? 'design system' : 'Portfoliable';
+    console.log(color('33', `A new ${label} update (${update.latestVersion}) is available.`));
+    console.log(`Run: ${color('32', `npm update ${update.name}`)}`);
+  }
+
   if (options.launch) {
     printRailSegment();
     printRailSegment({ dot: true, label: `${color('36', 'Preparing first build...')}` });

package/cli/portfoliable.mjs

@@ -27,6 +27,15 @@ import {
   readProjectUiPreferences
 } from '../scripts/terminal-ui.mjs';
 import { resolveConsumerRuntimeAliases } from '../scripts/consumer-runtime-aliases.mjs';
+import { findPackageUpdates } from '../scripts/package-updates.mjs';
+
+function resolveMermaidDevAliases(runtimeAliases) {
+  return [
+    ...runtimeAliases,
+    { find: /^dayjs$/, replacement: path.resolve(process.cwd(), 'node_modules/dayjs/esm/index.js') },
+    { find: 'dayjs/dayjs.min.js', replacement: path.resolve(process.cwd(), 'node_modules/dayjs/esm/index.js') }
+  ];
+}
 
 // MARK: TERMINAL STYLES
 // ANSI color code used for success-status text.
@@ -75,21 +84,6 @@ function firstNetworkAddress() {
   return null;
 }
 
-// Fetches latest published create-portfoliable version from npm registry.
-async function fetchLatestVersion() {
-  try {
-    // Calls npm metadata endpoint for latest dist-tag payload.
-    const response = await fetch('https://registry.npmjs.org/create-portfoliable/latest');
-    if (!response.ok) return null;
-
-    // Parses registry response payload.
-    const data = await response.json();
-    return data.version || null;
-  } catch {
-    return null;
-  }
-}
-
 // MARK: CLI ARGUMENT PARSING
 // Parses command and flags from argv into normalized runtime options.
 function parseCliArgs(argv) {
@@ -488,7 +482,7 @@ function createCaseContentAssetPlugin() {
 }
 
 // Prints startup summary box for dev server sessions.
-function printStartupBox({ localUrl, networkUrl, localVersion, latestVersion }) {
+function printStartupBox({ localUrl, networkUrl, updates }) {
   const lines = [
     `${green}${bold}Portfoliable ready!${reset}`,
     `${dim}Dev server is live and ready for editing.${reset}`,
@@ -499,13 +493,20 @@ function printStartupBox({ localUrl, networkUrl, localVersion, latestVersion })
     `${bold}Next:${reset} open the local URL in your browser.`
   ];
 
-  if (latestVersion && latestVersion !== localVersion && !latestVersion.includes('alpha')) {
+  for (const update of updates) {
     lines.push('');
-    lines.push(`${yellow}A new version (${latestVersion}) is available!${reset}`);
-    lines.push(`Upgrade now: ${green}npm update create-portfoliable${reset}`);
-    lines.push(`If it still persists, run: ${green}npm install create-portfoliable@latest${reset}`);
+    const isValence = update.name === '@portfoliablejs/valence';
+    const packageLabel = isValence ? 'design system' : 'Portfoliable';
+    lines.push(`${yellow}A new ${packageLabel} update (${update.latestVersion}) is available!${reset}`);
+    lines.push(`Upgrade now: ${green}npm update ${update.name}${reset}`);
+    if (!isValence) {
+      lines.push(`If it still persists, run: ${green}npm install ${update.name}@latest${reset}`);
+    }
     lines.push('Read changelog:');
-    lines.push(`${dim}https://github.com/portfoliablejs/portfoliable/blob/main/CHANGELOG.md${reset}`);
+    const changelogUrl = isValence
+      ? 'https://github.com/portfoliablejs/valence/blob/main/CHANGELOG.md'
+      : 'https://github.com/portfoliablejs/portfoliable/blob/main/CHANGELOG.md';
+    lines.push(`${dim}${changelogUrl}${reset}`);
   }
 
   printRailAttachedBox({ width: 96, lines });
@@ -595,13 +596,13 @@ async function runDevServer(flags, options = {}) {
   }
 
   const runtimeAliases = resolveConsumerRuntimeAliases(process.cwd());
+  const mermaidDevAliases = resolveMermaidDevAliases(runtimeAliases);
 
   // Creates Vite development server instance.
   const server = await createServer({
-    resolve: runtimeAliases.length > 0
-      ? { alias: runtimeAliases }
-      : undefined,
+    resolve: { alias: mermaidDevAliases },
     optimizeDeps: {
+      include: ['mermaid', 'mermaid > dayjs'],
       exclude: ['create-portfoliable']
     },
     server: {
@@ -626,15 +627,24 @@ async function runDevServer(flags, options = {}) {
 
   // Resolves currently running CLI package version.
   const localVersion = resolvePackageVersion();
-  // Fetches latest published package version.
-  const latestVersion = await fetchLatestVersion();
+  const valencePackagePath = path.resolve(process.cwd(), 'node_modules', '@portfoliablejs', 'valence', 'package.json');
+  let valenceVersion = null;
+  try {
+    valenceVersion = JSON.parse(fs.readFileSync(valencePackagePath, 'utf8')).version || null;
+  } catch {
+    valenceVersion = null;
+  }
+  const updates = await findPackageUpdates([
+    { name: 'create-portfoliable', currentVersion: localVersion },
+    ...(valenceVersion ? [{ name: '@portfoliablejs/valence', currentVersion: valenceVersion }] : [])
+  ]);
 
   if (fancyDots) {
     printRailSegment({ dot: true, label: `${cyan}${bold}Starting...${reset}` });
     printRailSpacer();
   }
 
-  printStartupBox({ localUrl, networkUrl, localVersion, latestVersion });
+  printStartupBox({ localUrl, networkUrl, updates });
 
   if (isInteractiveTerminal() && flags.open !== false) {
     let showCommands = false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-portfoliable",
-  "version": "1.2.17",
+  "version": "1.3.0",
   "description": "Unified Portfoliable package with initializer and runtime CLI",
   "private": false,
   "type": "module",

package/scripts/package-updates.mjs

@@ -0,0 +1,41 @@
+const PACKAGE_REGISTRY_URL = 'https://registry.npmjs.org';
+
+function parseVersion(version) {
+  const match = String(version || '').trim().match(/^(\d+)\.(\d+)\.(\d+)/);
+  return match ? match.slice(1).map(Number) : null;
+}
+
+function isNewerVersion(latestVersion, currentVersion) {
+  const latest = parseVersion(latestVersion);
+  const current = parseVersion(currentVersion);
+  if (!latest || !current) return false;
+
+  for (let index = 0; index < latest.length; index += 1) {
+    if (latest[index] !== current[index]) return latest[index] > current[index];
+  }
+
+  return false;
+}
+
+export async function fetchLatestPackageVersion(packageName) {
+  try {
+    const response = await fetch(`${PACKAGE_REGISTRY_URL}/${encodeURIComponent(packageName)}/latest`);
+    if (!response.ok) return null;
+
+    const data = await response.json();
+    return data.version || null;
+  } catch {
+    return null;
+  }
+}
+
+export async function findPackageUpdates(packages) {
+  const updates = await Promise.all(packages.map(async ({ name, currentVersion }) => {
+    const latestVersion = await fetchLatestPackageVersion(name);
+    if (!latestVersion || !isNewerVersion(latestVersion, currentVersion)) return null;
+
+    return { name, currentVersion, latestVersion };
+  }));
+
+  return updates.filter(Boolean);
+}

package/vite.config.js

@@ -94,8 +94,8 @@ export default defineConfig(({ command }) => {
       ? { alias: runtimeAliases }
       : undefined,
 
-    // In local-link mode, avoid prebundling Valence so edits in the linked package
-    // are reflected immediately during development.
+    // Keep Mermaid's CommonJS dependencies in Vite's normalized dev graph while
+    // avoiding prebundling Valence so linked-package edits remain observable.
     optimizeDeps: (command === 'serve' && usingLocalValence)
       ? { exclude: ['@portfoliablejs/valence'] }
       : undefined,