@flare-desktop/cli 0.1.2 → 0.1.4

package/README.md

@@ -40,7 +40,7 @@ environment and local layers. The executable does not read JSON from disk. Rebui
 build system tracks them. `flare dev` embeds the development layer and `flare build` embeds production. The `--config`
 and `--environment` CLI flags select the input at build time. On Windows the generated CMake project enables
 `FLARE_NATIVE_WEBVIEW` before fetching the C++ core; the CLI verifies that the native backend was enabled.
-The generated project requires a CLI release containing `src/lib/embed-config-cli.js` (0.1.2 or newer). The new scaffold targets C++ core `v0.1.1`; publish that tag and its SDK release before using prebuilt mode.
+Generated projects require CLI 0.1.4 or newer. They target C++ core v0.1.2; prebuilt mode requires the matching GitHub SDK Release. Vite templates use npm core v0.1.0 for development and TypeScript declarations.
 
 `flare build` passes `build.frontendDist` to CMake as `FLARE_FRONTEND_DIR`. The scaffolded `CMakeLists.txt` uses
 that variable for `FlareEmbedFrontend` and for the development directory. Change the config key, not the CMake
@@ -87,16 +87,19 @@ The configuration is validated against
 
 ## Frontend templates, prebuilt SDK and codegen
 
-`npm create flare-desktop@latest` offers JavaScript (the existing plain frontend) and TypeScript + Vite.
-TypeScript projects copy version-matched `core.js` and `core.d.ts` into `frontend/`; `tsconfig.json` maps
-`/core.js` to the declaration, while Vite bundles the JavaScript frontend into `dist/` before CMake embeds it.
+`npm create flare-desktop@latest` asks separately for framework (Vanilla, React or Vue),
+variant (JavaScript or TypeScript), and C++ core source or prebuilt SDK. The CLI accepts
+`--template=javascript|typescript|react-js|react-ts|vue-js|vue-ts` for scripted creation.
+Vanilla JavaScript has no bundler; every other template uses Vite. The C++ library injects `globalThis.flare` into the webview before navigation. Frontend code calls `flare.invoke(...)` without importing any runtime module; neither Vite nor the app serves a core JS URL. TypeScript variants install the types-only `@flare-desktop/core@0.1.0` and include it through `tsconfig.json` `types`. JavaScript variants do not require the npm core package. The first npm publication of core must be performed manually before installing TypeScript templates.
 
-Choose `--sdk=source` (FetchContent of core tag `v0.1.1`) or `--sdk=prebuilt` (download the matching
+The generated CMakeLists delegates embedded configuration generation, frontend directory selection and embedding to the library's `FlareConfigureApplication(target)` helper (provided both by FetchContent and the prebuilt SDK).
+
+Choose `--sdk=source` (FetchContent of core tag `v0.1.2`) or `--sdk=prebuilt` (download the matching
 GitHub Release SDK archives into `vendor/flare`). The first binary SDK matrix covers Windows x64 MSVC
 Debug/Release with MD/MT, Linux x64 GCC Debug/Release and macOS x64/arm64 Clang Debug/Release.
-Unsupported architectures/ABIs must use source mode. The current C++ core's native webview runtime is
-implemented on Windows; macOS and Linux builds remain headless. Release SDK archives do not exist until
-the core v0.1.1 tag workflow finishes.
+Unsupported architectures/ABIs must use source mode. The native webview runs on Windows, macOS and Linux;
+headless mode is an explicit testing option. Prebuilt mode requires the published core v0.1.2 SDK Release,
+created by the core SDK workflow after successful platform builds.
 
 The former C++ `codegen` executable is replaced by `npx flare codegen --language=header|cpp|json` with
 `--config`, `--out`, `--namespace`, `--embed-assets` and `--frontend`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flare-desktop/cli",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "Command line interface for the flare desktop toolkit",
   "type": "module",
   "bin": {

package/src/commands/dev.js

@@ -1,6 +1,6 @@
 import { setTimeout as delay } from "node:timers/promises";
 
-import { compileApplication, runHook } from "../lib/build.js";
+import { compileApplication, ensureFrontendDirectory, runHook } from "../lib/build.js";
 import { FlareError } from "../lib/errors.js";
 import { loadProject, productName } from "../lib/project.js";
 import { run, startShell, terminate } from "../lib/process.js";
@@ -48,6 +48,12 @@ export async function devCommand(context) {
   process.once("SIGTERM", sigtermHandler);
 
   try {
+    await ensureFrontendDirectory({
+      projectDirectory: context.projectDirectory,
+      config,
+      logger: context.logger
+    });
+
     if (config.build.beforeDevCommand) {
       context.logger.info(`before dev command: ${config.build.beforeDevCommand}`);
       server = startShell(config.build.beforeDevCommand, { cwd: context.projectDirectory });
@@ -61,8 +67,8 @@ export async function devCommand(context) {
     const { binary } = await compileApplication({
       projectDirectory: context.projectDirectory,
       config,
-    configFile: context.flags.config || "flare.config.json",
-    environment: context.flags.environment,
+      configFile: context.flags.config || "flare.config.json",
+      environment: context.flags.environment,
       mode: "Debug",
       logger: context.logger
     });

package/src/commands/init.js

@@ -2,11 +2,12 @@ import { existsSync, mkdirSync, readFileSync, rmSync, writeFileSync } from "node
 import path from "node:path";
 
 import { FlareError } from "../lib/errors.js";
-import { placeholderIcon } from "../lib/icons.js";
+import { flareIcon } from "../lib/icons.js";
 import { isValidAppName, toKebabCase } from "../lib/project.js";
 import { installSdk } from "../lib/sdk.js";
 import { writePng } from "../lib/png.js";
-import { CORE_VERSION, MIN_CLI_VERSION } from "../release-versions.js";
+import { runShell } from "../lib/process.js";
+import { CORE_VERSION, CORE_NPM_VERSION, MIN_CLI_VERSION } from "../release-versions.js";
 import {
   cmakeTemplate,
   configTemplate,
@@ -16,6 +17,9 @@ import {
   readmeTemplate,
   scriptTemplate,
   typescriptTemplate,
+  reactTemplate,
+  vueEntryTemplate,
+  vueComponentTemplate,
   tsconfigTemplate,
   viteConfigTemplate,
   sourceTemplate,
@@ -36,10 +40,14 @@ export async function initProject({
   template = "javascript",
   sdkMode = "source",
   sdkFetch,
+  installDependencies = false,
   force = false,
   logger
 }) {
-  if (!["javascript", "typescript"].includes(template)) throw new FlareError("template must be javascript or typescript");
+  const templates = ["javascript", "typescript", "react-js", "react-ts", "vue-js", "vue-ts"];
+  if (!templates.includes(template)) throw new FlareError(`template must be one of: ${templates.join(", ")}`);
+  const vite = template !== "javascript";
+  const typed = template === "typescript" || template.endsWith("-ts");
   if (!["source", "prebuilt"].includes(sdkMode)) throw new FlareError("SDK mode must be source or prebuilt");
   const projectName = toKebabCase(name);
   if (!isValidAppName(projectName)) {
@@ -75,7 +83,7 @@ export async function initProject({
     {
       file: "package.json",
       content: `${JSON.stringify(
-        packageJsonTemplate({ name: projectName, version: appVersion, cliVersion: MIN_CLI_VERSION, template }),
+        packageJsonTemplate({ name: projectName, version: appVersion, cliVersion: MIN_CLI_VERSION, coreNpmVersion: CORE_NPM_VERSION, template }),
         null,
         2
       )}\n`
@@ -90,16 +98,19 @@ export async function initProject({
     },
     { file: "frontend/index.html", content: indexHtmlTemplate(projectName, template) },
     { file: "frontend/style.css", content: styleTemplate() },
-    ...(template === "typescript" ? [
-      { file: "frontend/main.ts", content: typescriptTemplate() },
-      { file: "frontend/core.js", content: readFileSync(new URL("../templates/core.js", import.meta.url), "utf8") },
-      { file: "frontend/core.d.ts", content: readFileSync(new URL("../templates/core.d.ts", import.meta.url), "utf8") },
-      { file: "tsconfig.json", content: JSON.stringify(tsconfigTemplate(), null, 2) + "\n" },
-      { file: "vite.config.mjs", content: viteConfigTemplate() }
-    ] : [{ file: "frontend/main.js", content: scriptTemplate() }]),
+    ...(template === "javascript" ? [{ file: "frontend/main.js", content: scriptTemplate() }] : []),
+    ...(template === "typescript" ? [{ file: "frontend/main.ts", content: typescriptTemplate() }] : []),
+    ...(template === "react-js" ? [{ file: "frontend/main.jsx", content: reactTemplate(projectName) }] : []),
+    ...(template === "react-ts" ? [{ file: "frontend/main.tsx", content: reactTemplate(projectName, true) }] : []),
+    ...(template.startsWith("vue-") ? [
+      { file: `frontend/main.${typed ? "ts" : "js"}`, content: vueEntryTemplate() },
+      { file: "frontend/App.vue", content: vueComponentTemplate(projectName, typed) }
+    ] : []),
+    ...(typed ? [{ file: "tsconfig.json", content: JSON.stringify(tsconfigTemplate(template), null, 2) + "\n" }] : []),
+    ...(vite ? [{ file: "vite.config.mjs", content: viteConfigTemplate(template) }] : []),
     { file: ".gitignore", content: gitignoreTemplate() },
     { file: ".clang-format", content: readFileSync(new URL("../templates/clang-format.txt", import.meta.url), "utf8") },
-    { file: "README.md", content: readmeTemplate(projectName) }
+    { file: "README.md", content: readmeTemplate(projectName, template) }
   ];
 
   for (const entry of files) {
@@ -116,17 +127,30 @@ export async function initProject({
     }
   }
 
-  writeFileSync(path.join(targetDirectory, "icons", "icon.png"), writePng(placeholderIcon()));
-  writeFileSync(path.join(targetDirectory, "icons", "32x32.png"), writePng(placeholderIcon(32)));
+  writeFileSync(path.join(targetDirectory, "icons", "icon.png"), writePng(flareIcon()));
+  writeFileSync(path.join(targetDirectory, "icons", "32x32.png"), writePng(flareIcon(32)));
 
   const written = [...files.map((entry) => entry.file), "icons/icon.png", "icons/32x32.png"];
 
+  if (installDependencies) {
+    if (logger) logger.info("installing project dependencies with npm");
+    let result;
+    try {
+      result = await runShell("npm install --no-audit --no-fund", { cwd: targetDirectory });
+    } catch (error) {
+      throw new FlareError(`npm install could not start in '${targetDirectory}': ${error.message}; run npm install manually`);
+    }
+    if (result.code !== 0) {
+      throw new FlareError(`npm install failed in '${targetDirectory}' (code ${result.code}); the project was kept, run npm install manually`);
+    }
+  }
+
   if (logger) {
     logger.info(`created project '${projectName}' in '${targetDirectory}'`);
     logger.info("");
     logger.info("next steps:");
     logger.step(`cd ${path.relative(process.cwd(), targetDirectory) || "."}`);
-    logger.step("npm install");
+    if (!installDependencies) logger.step("npm install");
     logger.step("npm run dev");
   }
 

package/src/help.js

@@ -20,7 +20,7 @@ export function helpText() {
     "  --project=<path>      project directory (default: .)",
     "  --config=<path>       configuration file (default: flare.config.json)",
     "  --environment=<name>  add the environment configuration layer",
-    "  --template=<javascript|typescript>  frontend template (init)",
+    "  --template=<javascript|typescript|react-js|react-ts|vue-js|vue-ts>  frontend template (init)",
     "  --sdk=<source|prebuilt>  C++ dependency mode (init)",
     "  --language=<header|cpp|json>  codegen format",
     "  --namespace=<name>    codegen C++ namespace",

package/src/lib/build.js

@@ -1,3 +1,5 @@
+import { existsSync } from "node:fs";
+
 import { buildDirectory, buildProject, configureProject, findExecutable } from "./cmake.js";
 import { FlareError } from "./errors.js";
 import { binaryName, frontendDirectory } from "./project.js";
@@ -10,14 +12,35 @@ export async function runHook(command, { cwd, env, logger, label }) {
   if (result.code !== 0) throw new FlareError(`${label} failed with code ${result.code}`);
 }
 
+export async function ensureFrontendDirectory({ projectDirectory, config, logger }) {
+  const frontend = frontendDirectory(projectDirectory, config);
+  if (existsSync(frontend)) return;
+  if (!config.build.beforeBuildCommand) {
+    throw new FlareError(`frontend directory '${frontend}' is missing and no beforeBuildCommand is configured`);
+  }
+  logger.info("preparing frontend assets for CMake embedding");
+  await runHook(config.build.beforeBuildCommand, {
+    cwd: projectDirectory,
+    logger,
+    label: "frontend build command"
+  });
+  if (!existsSync(frontend)) {
+    throw new FlareError(`frontend build command did not create '${frontend}'`);
+  }
+}
+
 export async function compileApplication({ projectDirectory, config, mode, env, logger, configFile, environment }) {
+  const frontend = frontendDirectory(projectDirectory, config);
+  if (!existsSync(frontend)) {
+    throw new FlareError(`frontend directory '${frontend}' is missing; run the frontend build command before compiling`);
+  }
   const directory = buildDirectory(projectDirectory, mode);
   await configureProject(projectDirectory, {
     directory,
     mode,
     env,
     logger,
-    frontendDirectory: frontendDirectory(projectDirectory, config),
+    frontendDirectory: frontend,
     configFile,
     environment
   });

package/src/lib/cmake.js

@@ -35,24 +35,37 @@ export function buildDirectory(projectDirectory, mode) {
   return path.join(projectDirectory, "build", mode === "Debug" ? "debug" : "release");
 }
 
+export function msvcUtf8Arguments(directory, { platform = process.platform, cxxFlags = process.env.CXXFLAGS ?? "" } = {}) {
+  if (platform !== "win32") return [];
+  const cacheFile = path.join(directory, "CMakeCache.txt");
+  const cache = existsSync(cacheFile) ? readFileSync(cacheFile, "utf8") : "";
+  const existing = cache.match(/^CMAKE_CXX_FLAGS:STRING=(.*)$/m)?.[1] ?? cxxFlags;
+  if (/(?:^|\s)\/utf-8(?:\s|$)/i.test(existing)) return [];
+  return [`-DCMAKE_CXX_FLAGS:STRING=${[existing.trim(), "/utf-8"].filter(Boolean).join(" ")}`];
+}
+
 export async function configureProject(projectDirectory, { directory, mode, env, logger, frontendDirectory, configFile = "flare.config.json", environment = "production" }) {
   if (!cmakeVersion()) throw new FlareError("cmake was not found in PATH");
   const outputDirectory = path.join(directory, "bin");
   const configuration = mode.toUpperCase();
+  const generator = process.env.CMAKE_GENERATOR ?? "";
+  const multiConfiguration = generator
+    ? /^(Visual Studio|Xcode|Ninja Multi-Config)/.test(generator)
+    : process.platform === "win32";
+  const prebuiltSdk = existsSync(path.join(projectDirectory, "vendor", "flare", "sdk-manifest.json"));
   const args = [
     "-S",
     projectDirectory,
     "-B",
     directory,
     ...generatorArguments(),
-    `-DCMAKE_BUILD_TYPE=${mode}`,
+    ...(!multiConfiguration ? [`-DCMAKE_BUILD_TYPE=${mode}`] : []),
     `-DCMAKE_RUNTIME_OUTPUT_DIRECTORY=${outputDirectory}`,
     `-DCMAKE_RUNTIME_OUTPUT_DIRECTORY_${configuration}=${outputDirectory}`,
     "-DCMAKE_EXPORT_COMPILE_COMMANDS=ON",
     `-DFLARE_FRONTEND_DIR=${frontendDirectory ?? path.join(projectDirectory, "frontend")}`,
-    "-DFLARE_BUILD_EXAMPLES=OFF",
-    "-DFLARE_BUILD_TESTS=OFF",
-    "-DFLARE_INSTALL=OFF"
+    ...(!prebuiltSdk ? ["-DFLARE_BUILD_EXAMPLES=OFF", "-DFLARE_BUILD_TESTS=OFF", "-DFLARE_INSTALL=OFF"] : []),
+    ...msvcUtf8Arguments(directory, { cxxFlags: env?.CXXFLAGS ?? process.env.CXXFLAGS ?? "" })
   ];
   logger.debug(`cmake ${args.join(" ")}`);
   const result = await run("cmake", args, { cwd: projectDirectory, env });

package/src/lib/embedded-config.js

@@ -152,7 +152,7 @@ export function generateEmbeddedConfig(config, raw = config, namespace = "FlareG
       lines.push(`window.position = Flare::WindowPosition{${x}, ${y}};`);
     }
     if (typeof value.theme === "string") {
-      const theme = { light: "Light", dark: "Dark", automatic: "Automatic", system: "Automatic", auto: "Automatic" }[value.theme.toLowerCase()];
+      const theme = { light: "LIGHT", dark: "DARK", automatic: "AUTOMATIC", system: "AUTOMATIC", auto: "AUTOMATIC" }[value.theme.toLowerCase()];
       if (theme) lines.push(`window.theme = Flare::WindowTheme::${theme};`);
     }
     lines.push("config.windows.push_back(window); }");

package/src/lib/icons.js

@@ -1,23 +1,13 @@
+import { readFileSync } from "node:fs";
+
 import { FlareError } from "./errors.js";
-import { resizePng, writePng } from "./png.js";
-
-export function placeholderIcon(size = 512) {
-  const data = Buffer.alloc(size * size * 4);
-  const center = (size - 1) / 2;
-  const radius = size * 0.46;
-  for (let y = 0; y < size; y += 1) {
-    for (let x = 0; x < size; x += 1) {
-      const target = (y * size + x) * 4;
-      const distance = Math.hypot(x - center, y - center) / radius;
-      const glow = Math.max(0, Math.min(1, 1 - Math.abs(distance - 0.55) * 1.6));
-      const edge = distance <= 1 ? 1 : 0;
-      data[target] = edge ? Math.round(44 + 172 * glow) : 0;
-      data[target + 1] = edge ? Math.round(35 + 132 * glow) : 0;
-      data[target + 2] = edge ? Math.round(40 + 137 * glow) : 0;
-      data[target + 3] = edge ? 255 : 0;
-    }
-  }
-  return { width: size, height: size, data };
+import { readPng, resizePng, writePng } from "./png.js";
+
+let defaultMark;
+
+export function flareIcon(size = 512) {
+  defaultMark ??= readPng(readFileSync(new URL("../assets/flare-mark.png", import.meta.url)));
+  return resizePng(defaultMark, size, size);
 }
 
 const ICO_SIZES = [16, 24, 32, 48, 64, 128, 256];

package/src/release-versions.js

@@ -1,2 +1,3 @@
-export const CORE_VERSION = "0.1.1";
-export const MIN_CLI_VERSION = "0.1.2";
+export const CORE_VERSION = "0.1.2";
+export const CORE_NPM_VERSION = "0.1.0";
+export const MIN_CLI_VERSION = "0.1.4";

package/src/templates/project.js

@@ -8,6 +8,7 @@ export function embeddedIdentifier(name) {
 }
 
 export function configTemplate({ name, identifier, version, template = "javascript" }) {
+  const vite = template !== "javascript";
   return {
     $schema: SCHEMA_URL,
     package: { productName: name, version },
@@ -18,11 +19,11 @@ export function configTemplate({ name, identifier, version, template = "javascri
       version
     },
     build: {
-      frontendDist: template === "typescript" ? "dist" : "frontend",
-      devUrl: template === "typescript" ? "http://127.0.0.1:5173" : "",
-      beforeDevCommand: template === "typescript" ? "npm run frontend:dev" : "",
+      frontendDist: vite ? "dist" : "frontend",
+      devUrl: vite ? "http://127.0.0.1:5173" : "",
+      beforeDevCommand: vite ? "npm run frontend:dev" : "",
       afterDevCommand: "",
-      beforeBuildCommand: template === "typescript" ? "npm run frontend:build" : "",
+      beforeBuildCommand: vite ? "npm run frontend:build" : "",
       afterBuildCommand: ""
     },
     bundle: {
@@ -51,7 +52,11 @@ export function configTemplate({ name, identifier, version, template = "javascri
   };
 }
 
-export function packageJsonTemplate({ name, version, cliVersion, template = "javascript" }) {
+export function packageJsonTemplate({ name, version, cliVersion, coreNpmVersion, template = "javascript" }) {
+  const vite = template !== "javascript";
+  const typed = template === "typescript" || template.endsWith("-ts");
+  const react = template.startsWith("react-");
+  const vue = template.startsWith("vue-");
   return {
     name,
     version,
@@ -62,11 +67,20 @@ export function packageJsonTemplate({ name, version, cliVersion, template = "jav
       build: "flare build",
       bundle: "flare bundle",
       icon: "flare icon icons/icon.png",
-      ...(template === "typescript" ? { "frontend:dev": "vite --host 127.0.0.1", "frontend:build": "tsc --noEmit && vite build" } : {})
+      ...(vite ? {
+        "frontend:dev": "vite --host 127.0.0.1",
+        "frontend:build": typed ? `${vue ? "vue-tsc" : "tsc"} --noEmit && vite build` : "vite build"
+      } : {})
     },
     devDependencies: {
       "@flare-desktop/cli": `^${cliVersion}`,
-      ...(template === "typescript" ? { typescript: "^5.9.3", vite: "^6.4.5" } : {})
+      ...(vite ? { vite: "^6.4.5" } : {}),
+      ...(typed ? { "@flare-desktop/core": coreNpmVersion } : {}),
+      ...(typed ? { typescript: "^5.9.3" } : {}),
+      ...(react ? { react: "^19.2.0", "react-dom": "^19.2.0", "@vitejs/plugin-react": "^4.7.0" } : {}),
+      ...(react && typed ? { "@types/react": "^19.2.0", "@types/react-dom": "^19.2.0" } : {}),
+      ...(vue ? { vue: "^3.5.21", "@vitejs/plugin-vue": "^5.2.4" } : {}),
+      ...(vue && typed ? { "vue-tsc": "^3.1.3" } : {})
     }
   };
 }
@@ -94,35 +108,11 @@ FetchContent_MakeAvailable(flare)`}
 
 add_executable(${name} source/main.cpp)
 target_link_libraries(${name} PRIVATE flare::core flare::assets)
+if(MSVC)
+    target_compile_options(${name} PRIVATE /utf-8)
+endif()
 
-find_program(FLARE_NODE_EXECUTABLE node REQUIRED)
-set(FLARE_CONFIG_FILE "flare.config.json" CACHE STRING "Source application configuration")
-set(FLARE_CONFIG_ENVIRONMENT "production" CACHE STRING "Build configuration layer")
-get_filename_component(FLARE_CONFIG_ABSOLUTE "\${FLARE_CONFIG_FILE}" ABSOLUTE BASE_DIR "\${CMAKE_CURRENT_SOURCE_DIR}")
-get_filename_component(FLARE_CONFIG_DIRECTORY "\${FLARE_CONFIG_ABSOLUTE}" DIRECTORY)
-get_filename_component(FLARE_CONFIG_NAME "\${FLARE_CONFIG_ABSOLUTE}" NAME_WE)
-file(GLOB FLARE_CONFIG_LAYERS CONFIGURE_DEPENDS "\${FLARE_CONFIG_DIRECTORY}/\${FLARE_CONFIG_NAME}*.json")
-set(FLARE_CONFIG_GENERATOR "\${CMAKE_CURRENT_SOURCE_DIR}/node_modules/@flare-desktop/cli/src/lib/embed-config-cli.js")
-set(FLARE_CONFIG_IMPLEMENTATION "\${CMAKE_CURRENT_SOURCE_DIR}/node_modules/@flare-desktop/cli/src/lib/embedded-config.js")
-set(FLARE_CONFIG_LOADER "\${CMAKE_CURRENT_SOURCE_DIR}/node_modules/@flare-desktop/cli/src/lib/project.js")
-set(FLARE_GENERATED_CONFIG "\${CMAKE_CURRENT_BINARY_DIR}/flare-embedded-config.h")
-file(GENERATE OUTPUT "\${CMAKE_CURRENT_BINARY_DIR}/flare-config-selection.txt"
-    CONTENT "\${FLARE_CONFIG_FILE}\n\${FLARE_CONFIG_ENVIRONMENT}\n")
-add_custom_command(
-    OUTPUT "\${FLARE_GENERATED_CONFIG}"
-    COMMAND "\${FLARE_NODE_EXECUTABLE}" "\${FLARE_CONFIG_GENERATOR}"
-            "\${CMAKE_CURRENT_SOURCE_DIR}" "\${FLARE_CONFIG_FILE}" "\${FLARE_CONFIG_ENVIRONMENT}"
-            "\${FLARE_GENERATED_CONFIG}"
-    DEPENDS "\${FLARE_CONFIG_GENERATOR}" "\${FLARE_CONFIG_IMPLEMENTATION}" "\${FLARE_CONFIG_LOADER}"
-            "\${CMAKE_CURRENT_BINARY_DIR}/flare-config-selection.txt" \${FLARE_CONFIG_LAYERS}
-    VERBATIM)
-target_sources(${name} PRIVATE "\${FLARE_GENERATED_CONFIG}")
-target_include_directories(${name} PRIVATE "\${CMAKE_CURRENT_BINARY_DIR}")
-
-set(FLARE_FRONTEND_DIR "frontend" CACHE PATH "Frontend directory")
-file(TO_CMAKE_PATH "\${FLARE_FRONTEND_DIR}" FLARE_FRONTEND_DIR)
-target_compile_definitions(${name} PRIVATE FLARE_FRONTEND_DIR="\${FLARE_FRONTEND_DIR}")
-FlareEmbedFrontend(${name} "\${FLARE_FRONTEND_DIR}")
+FlareConfigureApplication(${name})
 `;
 }
 
@@ -171,6 +161,10 @@ int main() {
 }
 
 export function indexHtmlTemplate(name, template = "javascript") {
+  const react = template.startsWith("react-");
+  const vue = template.startsWith("vue-");
+  const typed = template === "typescript" || template.endsWith("-ts");
+  const entry = react ? `main.${typed ? "tsx" : "jsx"}` : `main.${typed ? "ts" : "js"}`;
   return `<!doctype html>
 <html lang="en">
 <head>
@@ -180,13 +174,13 @@ export function indexHtmlTemplate(name, template = "javascript") {
 <link rel="stylesheet" href="style.css">
 </head>
 <body>
-<main>
+${react || vue ? `<div id="${react ? "root" : "app"}"></div>` : `<main>
 <h1>${name}</h1>
 <p>the frontend runs in the system webview, the backend in C++.</p>
 <button id="greet">call the backend</button>
 <pre id="output"></pre>
-</main>
-<script type="module" src="${template === "typescript" ? "main.ts" : "main.js"}"></script>
+</main>`}
+<script type="module" src="${entry}"></script>
 </body>
 </html>
 `;
@@ -254,63 +248,116 @@ pre {
 }
 
 export function scriptTemplate() {
-  return `import { app, invoke } from "/core.js";
-
-const output = document.querySelector("#output");
+  return `const output = document.querySelector("#output");
 
 document.querySelector("#greet").addEventListener("click", async () => {
-  const message = await invoke("greet", { name: "flare" });
-  const version = await app.version();
+  const message = await flare.invoke("greet", { name: "flare" });
+  const version = await flare.app.version();
   output.textContent = \`\${message} (\${version})\`;
 });
 `;
 }
 
 export function typescriptTemplate() {
-  return `import { app, invoke } from "/core.js";
-
-const output = document.querySelector<HTMLPreElement>("#output");
+  return `const output = document.querySelector<HTMLPreElement>("#output");
 const button = document.querySelector<HTMLButtonElement>("#greet");
 
 button?.addEventListener("click", async () => {
-  const message = await invoke<string>("greet", { name: "flare" });
-  const version = await app.version();
+  const message = await flare.invoke<string>("greet", { name: "flare" });
+  const version = await flare.app.version();
   if (output) output.textContent = \`\${message} (\${version})\`;
 });
 `;
 }
 
-export function tsconfigTemplate() {
+export function reactTemplate(name, typed = false) {
+  return `import { useState } from "react";
+import { createRoot } from "react-dom/client";
+function App() {
+  const [output, setOutput] = useState${typed ? "<string>" : ""}("");
+  async function greet() {
+    const message = await flare.invoke${typed ? "<string>" : ""}("greet", { name: "flare" });
+    setOutput(\`\${message} (\${await flare.app.version()})\`);
+  }
+  return <main>
+    <h1>${name}</h1>
+    <p>React in the system webview. C++ on the backend.</p>
+    <button onClick={greet}>call the backend</button>
+    <pre>{output}</pre>
+  </main>;
+}
+
+createRoot(document.getElementById("root")${typed ? "!" : ""}).render(<App />);
+`;
+}
+
+export function vueEntryTemplate() {
+  return `import { createApp } from "vue";
+import App from "./App.vue";
+
+createApp(App).mount("#app");
+`;
+}
+
+export function vueComponentTemplate(name, typed = false) {
+  return `<script setup${typed ? ' lang="ts"' : ""}>
+import { ref } from "vue";
+const output = ref${typed ? "<string>" : ""}("");
+async function greet() {
+  const message = await flare.invoke${typed ? "<string>" : ""}("greet", { name: "flare" });
+  output.value = \`\${message} (\${await flare.app.version()})\`;
+}
+</script>
+
+<template>
+  <main>
+    <h1>${name}</h1>
+    <p>Vue in the system webview. C++ on the backend.</p>
+    <button @click="greet">call the backend</button>
+    <pre>{{ output }}</pre>
+  </main>
+</template>
+`;
+}
+
+export function tsconfigTemplate(template = "typescript") {
   return {
     compilerOptions: {
       target: "ES2022", lib: ["ES2022", "DOM"], module: "ESNext", moduleResolution: "Bundler",
-      strict: true, noEmit: true, skipLibCheck: true, types: ["vite/client"],
-      paths: { "/core.js": ["./frontend/core.d.ts"] }
+      strict: true, noEmit: true, skipLibCheck: true, types: ["vite/client", "@flare-desktop/core"],
+      ...(template === "react-ts" ? { jsx: "react-jsx" } : {})
     },
-    include: ["frontend/main.ts"]
+    include: ["frontend/**/*.ts", "frontend/**/*.tsx", "frontend/**/*.vue"]
   };
 }
 
-export function viteConfigTemplate() {
+export function viteConfigTemplate(template = "typescript") {
+  const plugin = template.startsWith("react-") ? "@vitejs/plugin-react" :
+    template.startsWith("vue-") ? "@vitejs/plugin-vue" : null;
   return `import { defineConfig } from "vite";
+${plugin ? `import frameworkPlugin from "${plugin}";\n` : ""}
 export default defineConfig({
   root: "frontend",
   base: "./",
+  plugins: [${plugin ? "frameworkPlugin()" : ""}],
   build: { outDir: "../dist", emptyOutDir: true },
   server: { host: "127.0.0.1", port: 5173, strictPort: true }
 });
 `;
+
 }
 
 export function gitignoreTemplate() {
   return "build/\ntarget/\nnode_modules/\ndist/\n.DS_Store\n";
 }
 
-export function readmeTemplate(name) {
+export function readmeTemplate(name, template = "javascript") {
   return `# ${name}
 
 A desktop application built with [flare](https://github.com/flare-desktop/flare).
 
+Frontend template: ${template}.
+
 ## Development
 
 \`\`\`bash
@@ -326,7 +373,7 @@ npm run bundle
 \`\`\`
 
 \`npm run dev\` builds the C++ core and serves \`frontend/\` in the system webview.
-\`npm run build\` compiles the frontend and the effective typed configuration into the executable. No JSON file is needed at runtime. On Windows, the native webview is enabled automatically. A configuration change requires rebuilding.
+\`npm run build\` compiles the frontend and the effective typed configuration into the executable. No JSON file is needed at runtime. The native webview is selected automatically on Windows, macOS and Linux. A configuration change requires rebuilding.
 \`npm run bundle\` assembles the configured bundle targets under \`target/bundle\`.
 
 ## Icons

package/src/templates/core.d.ts

@@ -1,135 +0,0 @@
-export type Payload = Record<string, unknown> | unknown[] | string | number | boolean | null;
-
-export interface InvokeOptions {
-    id?: string;
-    window?: string;
-    webview?: string;
-}
-
-export interface ListenOptions {
-    window?: string;
-}
-
-export interface IpcErrorShape {
-    code: string;
-    message: string;
-    details?: Payload;
-}
-
-export interface IpcFailure extends Error {
-    code: string;
-    details?: Payload;
-}
-
-export interface ChannelMessage {
-    sequence: number;
-    payload: Payload;
-    state: 'open' | 'closed';
-}
-
-export interface Channel {
-    identifier: number;
-    name: string;
-    send(payload?: Payload): Promise<void>;
-    deliver(message: ChannelMessage): void;
-    close(): void;
-}
-
-export interface Metadata {
-    readonly protocol: string;
-    readonly host: string;
-    readonly version: string;
-}
-
-export function isFlare(): boolean;
-export function metadata(): Metadata;
-export function invoke<T = unknown>(command: string, payload?: Payload, options?: InvokeOptions): Promise<T>;
-export function listen(event: string, handler: (payload: Payload) => void, options?: ListenOptions): Promise<() => Promise<void>>;
-export function once(event: string, handler: (payload: Payload) => void, options?: ListenOptions): Promise<() => Promise<void>>;
-export function unlisten(event: string, id: number): Promise<void>;
-export function emit(event: string, payload?: Payload): Promise<void>;
-export function dispatch(event: string, payload?: Payload): number;
-export function createChannel(onMessage: (message: ChannelMessage) => void): Channel;
-export function currentWindow(): {
-    label: string;
-    close(): Promise<unknown>;
-    setTitle(title: string): Promise<unknown>;
-    show(): Promise<unknown>;
-    hide(): Promise<unknown>;
-};
-
-export const app: {
-    version(): Promise<string>;
-    describe(): Promise<Payload>;
-    config(): Promise<Payload>;
-    platform(): Promise<Payload>;
-    exit(): Promise<unknown>;
-};
-
-export const window: {
-    list(): Promise<string[]>;
-    emit(event: string, payload?: Payload): Promise<unknown>;
-};
-
-export const plugins: { list(): Promise<Payload> };
-export interface MenuItem {
-    id?: string;
-    kind?: 'text' | 'check' | 'radio' | 'separator' | 'submenu' | 'predefined';
-    text?: string;
-    accelerator?: string;
-    enabled?: boolean;
-    checked?: boolean;
-    icon?: string;
-    items?: MenuItem[];
-}
-
-export const menu: {
-    describe(): Promise<{ id: string; items: MenuItem[] }>;
-    set(items: MenuItem[]): Promise<boolean>;
-    dispatch(id: string): Promise<boolean>;
-    onCommand(handler: (id: string, payload: { id: string }) => void): () => Promise<boolean>;
-};
-export const commands: {
-    register(name: string, handler: (payload: Payload) => Payload): void;
-    unregister(name: string): boolean;
-    has(name: string): boolean;
-    names(): string[];
-};
-export const log: {
-    trace(message: string): Promise<void>;
-    debug(message: string): Promise<void>;
-    info(message: string): Promise<void>;
-    warn(message: string): Promise<void>;
-    error(message: string): Promise<void>;
-};
-
-export type DirectoryName =
-    | 'appData'
-    | 'appLocalData'
-    | 'appConfig'
-    | 'appCache'
-    | 'appLog'
-    | 'home'
-    | 'documents'
-    | 'downloads'
-    | 'desktop'
-    | 'pictures'
-    | 'temp'
-    | 'executable'
-    | 'resource'
-    | 'current';
-
-export const path: {
-    resolve(name: DirectoryName | string): Promise<{ name: string; path: string }>;
-    all(): Promise<Record<DirectoryName, string>>;
-};
-
-export const tray: {
-    describe(): Promise<Payload & { menu: { id: string; items: MenuItem[] } }>;
-    setIcon(icon: string): Promise<Payload>;
-    setTooltip(tooltip: string): Promise<Payload>;
-    setTitle(title: string): Promise<Payload>;
-    setVisible(visible: boolean): Promise<Payload>;
-    setMenu(items: MenuItem[]): Promise<Payload>;
-    dispatch(id: string): Promise<boolean>;
-};

package/src/templates/core.js

@@ -1,278 +0,0 @@
-const protocol = 'flare';
-const defaultHost = 'localhost';
-
-const coreCommands = new Map();
-const eventListeners = new Map();
-const channels = new Map();
-
-let listenerSequence = 0;
-let channelSequence = 0;
-
-function resolveBridge() {
-    const bridge = globalThis.__FLARE_BRIDGE__;
-    if (!bridge) {
-        throw new Error('flare: the ipc bridge is not available in this context');
-    }
-    return bridge;
-}
-
-function normalizeCallback(callback) {
-    if (callback === undefined || callback === null) {
-        return undefined;
-    }
-    if (typeof callback === 'function') {
-        return callback;
-    }
-    throw new TypeError('flare: callback must be a function');
-}
-
-export function isFlare() {
-    return typeof globalThis.__FLARE_BRIDGE__ !== 'undefined';
-}
-
-export function metadata() {
-    const bridge = globalThis.__FLARE_BRIDGE__;
-    return Object.freeze({
-        protocol,
-        host: (bridge && bridge.host) || defaultHost,
-        version: (bridge && bridge.version) || '0.0.0'
-    });
-}
-
-export async function invoke(command, payload = {}, options = {}) {
-    if (typeof command !== 'string' || command.length === 0) {
-        throw new TypeError('flare: command must be a non empty string');
-    }
-    const bridge = resolveBridge();
-    const request = {
-        id: options.id || `${Date.now().toString(36)}-${(listenerSequence += 1).toString(36)}`,
-        command,
-        payload: payload === undefined ? {} : payload,
-        window: options.window || '',
-        webview: options.webview || ''
-    };
-    const response = await bridge.invoke(request);
-    if (response === undefined || response === null) {
-        throw new Error(`flare: command '${command}' returned no response`);
-    }
-    if (response.successful === false) {
-        const error = response.error || {};
-        const failure = new Error(error.message || `flare: command '${command}' failed`);
-        failure.code = error.code || 'command-failed';
-        failure.details = error.details;
-        throw failure;
-    }
-    return response.result;
-}
-
-export async function listen(event, handler, options = {}) {
-    if (typeof event !== 'string' || event.length === 0) {
-        throw new TypeError('flare: event name must be a non empty string');
-    }
-    const callback = normalizeCallback(handler);
-    listenerSequence += 1;
-    const id = listenerSequence;
-    const window = options.window || '';
-    if (!eventListeners.has(event)) {
-        eventListeners.set(event, new Map());
-    }
-    eventListeners.get(event).set(id, { callback, window, once: false });
-    const bridge = resolveBridge();
-    if (typeof bridge.attachListener === 'function') {
-        bridge.attachListener(event, id, callback);
-    }
-    try {
-        await bridge.listen({ event, id, window });
-    } catch (error) {
-        eventListeners.get(event)?.delete(id);
-        await bridge.unlisten?.({ event, id });
-        throw error;
-    }
-    return () => unlisten(event, id);
-}
-
-export async function once(event, handler, options = {}) {
-    const remove = await listen(
-        event,
-        (payload) => {
-            remove();
-            if (typeof handler === 'function') {
-                handler(payload);
-            }
-        },
-        options
-    );
-    return remove;
-}
-
-export async function unlisten(event, id) {
-    const entries = eventListeners.get(event);
-    if (entries) {
-        entries.delete(id);
-        if (entries.size === 0) {
-            eventListeners.delete(event);
-        }
-    }
-    const bridge = globalThis.__FLARE_BRIDGE__;
-    if (bridge && typeof bridge.unlisten === 'function') {
-        await bridge.unlisten({ event, id });
-    }
-}
-
-export async function emit(event, payload = {}) {
-    const bridge = resolveBridge();
-    await bridge.emit({ event, payload });
-}
-
-export function dispatch(event, payload = {}) {
-    const entries = eventListeners.get(event);
-    if (!entries) {
-        return 0;
-    }
-    const pending = [];
-    for (const entry of entries.values()) {
-        pending.push(entry);
-    }
-    for (const entry of pending) {
-        if (entry.once) {
-            entries.delete(entry);
-        }
-        try {
-            entry.callback(payload);
-        } catch (error) {
-            console.error(`flare: listener for '${event}' failed`, error);
-        }
-    }
-    return pending.length;
-}
-
-export function createChannel(onMessage) {
-    channelSequence += 1;
-    const id = channelSequence;
-    const name = `channel-${id}`;
-    channels.set(id, { onMessage, closed: false });
-    return {
-        identifier: id,
-        name,
-        async send(payload = {}) {
-            const bridge = resolveBridge();
-            await bridge.channel({ id, payload });
-        },
-        deliver(message) {
-            if (onMessage) {
-                onMessage(message);
-            }
-            if (message && message.state === 'closed') {
-                channels.delete(id);
-            }
-        },
-        close() {
-            channels.delete(id);
-        }
-    };
-}
-
-export function currentWindow() {
-    const label = (globalThis.__FLARE_BRIDGE__ && globalThis.__FLARE_BRIDGE__.window) || 'main';
-    return {
-        label,
-        async close() {
-            return invoke('flare:window:close', { label });
-        },
-        async setTitle(title) {
-            return invoke('flare:window:set-title', { label, title });
-        },
-        async show() {
-            return invoke('flare:window:show', { label });
-        },
-        async hide() {
-            return invoke('flare:window:hide', { label });
-        }
-    };
-}
-
-export const app = Object.freeze({
-    version: () => invoke('flare:app:version'),
-    describe: () => invoke('flare:app:describe'),
-    config: () => invoke('flare:app:config'),
-    platform: () => invoke('flare:app:platform'),
-    exit: () => invoke('flare:app:exit')
-});
-
-export const window = Object.freeze({
-    list: () => invoke('flare:window:list'),
-    emit: (event, payload = {}) => invoke('flare:window:emit', { event, payload })
-});
-
-export const plugins = Object.freeze({
-    list: () => invoke('flare:plugin:list')
-});
-
-export const menu = Object.freeze({
-    describe: () => invoke('flare:menu:describe'),
-    set: (items) => invoke('flare:menu:set', { items }),
-    dispatch: (id) => invoke('flare:menu:dispatch', { id }),
-    onCommand: (handler) => listen('flare:menu:command', (payload) => handler(payload.id, payload))
-});
-
-export const commands = Object.freeze({
-    register(name, handler) {
-        if (typeof name !== 'string' || typeof handler !== 'function') {
-            throw new TypeError('flare: register expects a name and a handler');
-        }
-        coreCommands.set(name, handler);
-    },
-    unregister(name) {
-        return coreCommands.delete(name);
-    },
-    has(name) {
-        return coreCommands.has(name);
-    },
-    names() {
-        return Array.from(coreCommands.keys());
-    }
-});
-
-export const log = Object.freeze({
-    trace: (message) => emit('flare:log:trace', { message }),
-    debug: (message) => emit('flare:log:debug', { message }),
-    info: (message) => emit('flare:log:info', { message }),
-    warn: (message) => emit('flare:log:warn', { message }),
-    error: (message) => emit('flare:log:error', { message })
-});
-
-export const path = Object.freeze({
-    resolve: (name) => invoke('flare:path:resolve', { name }),
-    all: () => invoke('flare:path:all')
-});
-
-export const tray = Object.freeze({
-    describe: () => invoke('flare:tray:describe'),
-    setIcon: (icon) => invoke('flare:tray:set-icon', { icon }),
-    setTooltip: (tooltip) => invoke('flare:tray:set-tooltip', { tooltip }),
-    setTitle: (title) => invoke('flare:tray:set-title', { title }),
-    setVisible: (visible) => invoke('flare:tray:set-visible', { visible }),
-    setMenu: (items) => invoke('flare:tray:set-menu', { items }),
-    dispatch: (id) => invoke('flare:tray:dispatch', { id })
-});
-
-export default {
-    app,
-    commands,
-    createChannel,
-    currentWindow,
-    dispatch,
-    emit,
-    invoke,
-    isFlare,
-    listen,
-    log,
-    menu,
-    metadata,
-    once,
-    path,
-    plugins,
-    tray,
-    unlisten,
-    window
-};