ecopages 0.2.0-alpha.33 → 0.2.0-alpha.34

package/CHANGELOG.md

@@ -0,0 +1,15 @@
+# Changelog
+
+All notable changes to `ecopages` are documented here.
+
+> **Note:** Changelog tracking begins at version `0.2.0`. Changes prior to this release are not recorded here but are available in the git history.
+
+## [UNRELEASED] — TBD
+
+### Bug Fixes
+
+- Localized the Node CLI `tsx` runtime dependency so `ecopages` no longer requires a globally installed `tsx` binary.
+
+### Refactoring
+
+- Simplified CLI runtime startup and removed the thin-host bootstrap path; runtime selection now follows explicit `--runtime` overrides, package-manager hints, and Bun availability.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ecopages",
-  "version": "0.2.0-alpha.33",
+  "version": "0.2.0-alpha.34",
   "description": "CLI utilities for Ecopages",
   "type": "module",
   "license": "MIT",
@@ -29,7 +29,7 @@
     "ecopages": "bin/cli.js"
   },
   "dependencies": {
-    "@ecopages/core": "0.2.0-alpha.33",
+    "@ecopages/core": "0.2.0-alpha.34",
     "@ecopages/logger": "^0.2.2",
     "citty": "^0.1.6",
     "giget": "^2.0.0",

package/templates/blog-jsx/.env.example

@@ -1,4 +0,0 @@
-ECOPAGES_BASE_URL=http://localhost:3000
-ECOPAGES_HOSTNAME=localhost
-ECOPAGES_PORT=3000
-ECOPAGES_LOGGER_DEBUG=false

package/templates/blog-jsx/app.ts

@@ -1,6 +0,0 @@
-import { EcopagesApp } from '@ecopages/core/create-app';
-import appConfig from './eco.config';
-
-const app = new EcopagesApp({ appConfig });
-
-await app.start();

package/templates/blog-jsx/eco.config.ts

@@ -1,45 +0,0 @@
-import path from 'node:path';
-import { ConfigBuilder } from '@ecopages/core/config-builder';
-import { kitajsPlugin } from '@ecopages/kitajs';
-import { mdxPlugin } from '@ecopages/mdx';
-import { imageProcessorPlugin } from '@ecopages/image-processor';
-import { postcssProcessorPlugin } from '@ecopages/postcss-processor';
-import { tailwindV4Preset } from '@ecopages/postcss-processor/presets/tailwind-v4';
-
-const config = await new ConfigBuilder()
-	.setRootDir(process.cwd())
-	.setBaseUrl(process.env.ECOPAGES_BASE_URL || 'http://localhost:3000')
-	.setIntegrations([
-		kitajsPlugin(),
-		mdxPlugin({
-			compilerOptions: {
-				jsxImportSource: '@kitajs/html',
-			},
-		}),
-	])
-	.setProcessors([
-		imageProcessorPlugin({
-			options: {
-				sourceDir: path.resolve(process.cwd(), 'src/images'),
-				outputDir: path.resolve(process.cwd(), 'dist/images'),
-				publicPath: '/images',
-				acceptedFormats: ['jpg', 'jpeg', 'png', 'webp'],
-				quality: 80,
-				format: 'webp',
-				sizes: [
-					{ width: 320, label: 'sm' },
-					{ width: 768, label: 'md' },
-					{ width: 1024, label: 'lg' },
-					{ width: 1920, label: 'xl' },
-				],
-			},
-		}),
-		postcssProcessorPlugin(
-			tailwindV4Preset({
-				referencePath: path.resolve(process.cwd(), 'src/styles/tailwind.css'),
-			}),
-		),
-	])
-	.build();
-
-export default config;

package/templates/blog-jsx/modules.d.ts

@@ -1,4 +0,0 @@
-import '@ecopages/core/declarations';
-import '@ecopages/core/env';
-import '@ecopages/mdx/declarations';
-import '@ecopages/image-processor/types';

package/templates/blog-jsx/package.json

@@ -1,27 +0,0 @@
-{
-  "name": "blog-jsx",
-  "type": "module",
-  "private": true,
-  "scripts": {
-    "start": "ecopages start",
-    "dev": "ecopages dev",
-    "build": "ecopages build",
-    "preview": "ecopages preview",
-    "dev:watch": "ecopages dev:watch"
-  },
-  "devDependencies": {
-    "ecopages": "0.2.0-alpha.33",
-    "@ecopages/core": "0.2.0-alpha.33",
-    "@ecopages/kitajs": "0.2.0-alpha.33",
-    "@ecopages/lit": "0.2.0-alpha.33",
-    "@ecopages/mdx": "0.2.0-alpha.33",
-    "@ecopages/image-processor": "0.2.0-alpha.33",
-    "@ecopages/postcss-processor": "0.2.0-alpha.33",
-    "@ecopages/browser-router": "0.2.0-alpha.33",
-    "@ecopages/scripts-injector": "latest",
-    "@kitajs/html": "^4.2.13",
-    "@tailwindcss/postcss": "^4.1.18",
-    "tailwindcss": "^4.1.18",
-    "@ecopages/radiant": "0.3.0-alpha.16"
-  }
-}

package/templates/blog-jsx/src/components/icons.kita.tsx

@@ -1,46 +0,0 @@
-type IconProps = {
-	class?: string;
-	size?: number;
-};
-
-export const Moon = ({ class: className, size = 24 }: IconProps) => (
-	<svg
-		xmlns="http://www.w3.org/2000/svg"
-		width={size}
-		height={size}
-		viewBox="0 0 24 24"
-		fill="none"
-		stroke="currentColor"
-		stroke-width="2"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-		class={className}
-	>
-		<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" />
-	</svg>
-);
-
-export const Sun = ({ class: className, size = 24 }: IconProps) => (
-	<svg
-		xmlns="http://www.w3.org/2000/svg"
-		width={size}
-		height={size}
-		viewBox="0 0 24 24"
-		fill="none"
-		stroke="currentColor"
-		stroke-width="2"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-		class={className}
-	>
-		<circle cx="12" cy="12" r="4" />
-		<path d="M12 2v2" />
-		<path d="M12 20v2" />
-		<path d="m4.93 4.93 1.41 1.41" />
-		<path d="m17.66 17.66 1.41 1.41" />
-		<path d="M2 12h2" />
-		<path d="M20 12h2" />
-		<path d="m6.34 17.66-1.41 1.41" />
-		<path d="m19.07 4.93-1.41 1.41" />
-	</svg>
-);

package/templates/blog-jsx/src/components/theme-toggle.css

@@ -1,33 +0,0 @@
-.theme-toggle {
-	appearance: none;
-	border: 1px solid var(--color-border);
-	background: var(--color-surface-elevated);
-	border-radius: 0.375rem;
-	padding: 0.375rem 0.625rem;
-	font-size: var(--text-base);
-	cursor: pointer;
-	transition:
-		border-color 0.15s ease,
-		background-color 0.2s ease;
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-}
-
-.theme-toggle:hover {
-	border-color: var(--color-accent);
-}
-
-.dark .theme-toggle-sun {
-	display: inline-flex;
-}
-.dark .theme-toggle-moon {
-	display: none;
-}
-
-.theme-toggle-sun {
-	display: none;
-}
-.theme-toggle-moon {
-	display: inline-flex;
-}

package/templates/blog-jsx/src/components/theme-toggle.kita.tsx

@@ -1,22 +0,0 @@
-import { eco } from '@ecopages/core';
-import { Moon, Sun } from './icons.kita';
-
-export const ThemeToggle = eco.component({
-	dependencies: {
-		stylesheets: ['./theme-toggle.css'],
-		scripts: ['./theme-toggle.script.ts'],
-	},
-
-	render: () => {
-		return (
-			<theme-toggle class="theme-toggle" aria-label="Toggle theme" data-eco-persist="theme-toggle">
-				<span class="theme-toggle-sun">
-					<Sun size={18} />
-				</span>
-				<span class="theme-toggle-moon">
-					<Moon size={18} />
-				</span>
-			</theme-toggle>
-		);
-	},
-});

package/templates/blog-jsx/src/components/theme-toggle.script.ts

@@ -1,39 +0,0 @@
-import { customElement } from '@ecopages/radiant/decorators/custom-element';
-import { RadiantElement } from '@ecopages/radiant';
-
-@customElement('theme-toggle')
-export class ThemeToggleElement extends RadiantElement {
-	override connectedCallback(): void {
-		super.connectedCallback();
-		this.initTheme();
-		this.addEventListener('click', this.handleClick.bind(this));
-	}
-
-	handleClick() {
-		const isDark = document.documentElement.classList.contains('dark');
-		const next = !isDark;
-		this.updateTheme(next);
-		localStorage.setItem('theme', next ? 'dark' : 'light');
-	}
-
-	initTheme() {
-		const storedTheme = localStorage.getItem('theme');
-		const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-		const isDark = storedTheme ? storedTheme === 'dark' : prefersDark;
-		this.updateTheme(isDark);
-	}
-
-	updateTheme(isDark: boolean) {
-		document.documentElement.classList.toggle('dark', isDark);
-		document.documentElement.setAttribute('data-theme', isDark ? 'dark' : 'light');
-		this.setAttribute('aria-label', isDark ? 'Switch to light mode' : 'Switch to dark mode');
-	}
-}
-
-declare global {
-	namespace JSX {
-		interface IntrinsicElements {
-			'theme-toggle': HtmlTag;
-		}
-	}
-}

package/templates/blog-jsx/src/includes/head.kita.tsx

@@ -1,20 +0,0 @@
-import { eco } from '@ecopages/core';
-import type { PageHeadProps } from '@ecopages/core';
-import { Seo } from '@/includes/seo.kita';
-
-export const Head = eco.component<PageHeadProps>({
-	dependencies: {
-		stylesheets: ['../styles/tailwind.css'],
-	},
-
-	render: ({ metadata, children }) => {
-		return (
-			<head>
-				<meta charset="UTF-8" />
-				<meta name="viewport" content="width=device-width, initial-scale=1" />
-				<Seo {...metadata} />
-				{children}
-			</head>
-		);
-	},
-});

package/templates/blog-jsx/src/includes/html.kita.tsx

@@ -1,31 +0,0 @@
-import { eco } from '@ecopages/core';
-import type { HtmlTemplateProps } from '@ecopages/core';
-import { Head } from '@/includes/head.kita';
-
-const themeScript = `(function(){const t=localStorage.getItem('theme')||(window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light');document.documentElement.setAttribute('data-theme',t);if(t==='dark'){document.documentElement.classList.add('dark')}else{document.documentElement.classList.remove('dark')}})();`;
-
-const HtmlTemplate = eco.component<HtmlTemplateProps>({
-	dependencies: {
-		components: [Head],
-	},
-
-	render: ({ children, metadata, headContent, language = 'en' }) => {
-		return (
-			<html lang={language}>
-				<Head metadata={metadata}>
-					{
-						(
-							<>
-								<script>{themeScript}</script>
-								{headContent}
-							</>
-						) as 'safe'
-					}
-				</Head>
-				<body>{children as 'safe'}</body>
-			</html>
-		);
-	},
-});
-
-export default HtmlTemplate;

package/templates/blog-jsx/src/includes/seo.kita.tsx

@@ -1,28 +0,0 @@
-import type { PageMetadataProps } from '@ecopages/core';
-
-const baseUrl = process.env.ECOPAGES_BASE_URL ?? 'http://localhost:3000';
-const withBaseUrl = (path: string) => `${baseUrl}/${path.replace(/^\//u, '')}`;
-
-export function Seo({
-	title,
-	description,
-	image = '/assets/images/default-og.webp',
-	url,
-	keywords,
-}: PageMetadataProps) {
-	return (
-		<>
-			<title>{title}</title>
-			<link rel="icon" type="image/x-icon" href="/assets/favicon.svg" />
-			<link rel="robots" href="/robots.txt" />
-			<meta name="description" content={description} />
-			{keywords?.length ? <meta name="keywords" content={keywords.join(',')} /> : null}
-			<meta property="og:title" content={title} />
-			<meta property="og:description" content={description} />
-			<meta property="og:image" content={withBaseUrl(image)} />
-			<meta name="twitter:title" content={title} />
-			<meta name="twitter:description" content={description} />
-			{url ? <link rel="canonical" href={withBaseUrl(url)} /> : null}
-		</>
-	);
-}

package/templates/blog-jsx/src/layouts/base-layout/base-layout.css

@@ -1,27 +0,0 @@
-.layout-container {
-	@apply min-h-screen bg-surface text-text font-sans antialiased selection:bg-accent-subtle selection:text-accent flex flex-col;
-}
-
-.site-header {
-	@apply max-w-3xl mx-auto w-full border-border border-b bg-surface/80 backdrop-blur-sm sticky top-0 z-50 transition-all duration-300;
-}
-
-.header-content {
-	@apply max-w-3xl mx-auto px-6 h-16 flex items-center justify-between;
-}
-
-.logo {
-	@apply font-serif text-xl font-bold tracking-tight text-text no-underline;
-}
-
-.main-content {
-	@apply max-w-3xl mx-auto px-6 py-12 w-full grow;
-}
-
-.site-footer {
-	@apply max-w-3xl mx-auto px-6 py-8 w-full border-t border-border mt-auto flex flex-col sm:flex-row justify-between items-center gap-4 text-sm text-text-muted;
-}
-
-.footer-link {
-	@apply hover:text-link transition-colors;
-}

package/templates/blog-jsx/src/layouts/base-layout/base-layout.kita.tsx

@@ -1,42 +0,0 @@
-import { eco } from '@ecopages/core';
-import { ThemeToggle } from '@/components/theme-toggle.kita';
-
-export type BaseLayoutProps = {
-	children: JSX.Element | JSX.Element[];
-	id?: string;
-};
-
-export const BaseLayout = eco.component<BaseLayoutProps>({
-	dependencies: {
-		stylesheets: ['./base-layout.css'],
-		scripts: ['./base-layout.script.ts'],
-		components: [ThemeToggle],
-	},
-
-	render: ({ children }) => {
-		return (
-			<div class="layout-container">
-				<header class="site-header">
-					<div class="header-content">
-						<a href="/" class="logo">
-							EcoBlog
-						</a>
-						<ThemeToggle />
-					</div>
-				</header>
-				<main class="main-content">{children as 'safe'}</main>
-				<footer class="site-footer">
-					<p>{'© ' + new Date().getFullYear()} EcoBlog. Built with EcoPages.</p>
-					<a
-						href="https://github.com/ecopages/ecopages"
-						target="_blank"
-						rel="noopener noreferrer"
-						class="footer-link"
-					>
-						GitHub
-					</a>
-				</footer>
-			</div>
-		);
-	},
-});

package/templates/blog-jsx/src/layouts/base-layout/base-layout.script.ts

@@ -1,5 +0,0 @@
-import { createRouter } from '@ecopages/browser-router/client';
-
-createRouter({
-	viewTransitions: true,
-});

package/templates/blog-jsx/src/pages/404.css

@@ -1,27 +0,0 @@
-.error404 {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	gap: var(--space);
-	padding: var(--space-lg);
-	margin: var(--space-lg) auto;
-	max-width: fit-content;
-	background: var(--color-surface-elevated);
-	border: 1px solid var(--color-border);
-	border-radius: 0.5rem;
-	transition:
-		background-color 0.2s ease,
-		border-color 0.2s ease;
-}
-
-.error404 h1 {
-	margin-bottom: 0;
-}
-
-.error404 p {
-	margin-bottom: 0;
-	padding: var(--space);
-	background: var(--color-surface-muted);
-	border-radius: 0.375rem;
-}

package/templates/blog-jsx/src/pages/404.kita.tsx

@@ -1,21 +0,0 @@
-import { eco } from '@ecopages/core';
-import type { Error404TemplateProps } from '@ecopages/core';
-import { BaseLayout } from '@/layouts/base-layout/base-layout.kita';
-
-export default eco.page<Error404TemplateProps>({
-	dependencies: {
-		stylesheets: ['./404.css'],
-		components: [BaseLayout],
-	},
-
-	render: () => {
-		return (
-			<BaseLayout>
-				<div class="error404">
-					<h1>404 - Page Not Found</h1>
-					<p>The page you are looking for does not exist.</p>
-				</div>
-			</BaseLayout>
-		);
-	},
-});

package/templates/blog-jsx/src/pages/about.kita.tsx

@@ -1,31 +0,0 @@
-import { eco } from '@ecopages/core';
-import { BaseLayout } from '@/layouts/base-layout/base-layout.kita';
-
-export default eco.page({
-	layout: BaseLayout,
-
-	metadata: () => ({
-		title: 'About | Blog',
-		description: 'About the EcoPages Browser Router project',
-	}),
-
-	render: () => {
-		return (
-			<>
-				<a href="/" class="back-link">
-					← Back to Blog
-				</a>
-
-				<article class="post-content">
-					<h1>About This Project</h1>
-					<p>
-						This is a proof-of-concept for SPA navigation in EcoPages using the Browser Router. We fetch
-						full HTML, morph the DOM, and support View Transitions without a full page reload.
-					</p>
-				</article>
-
-				<div style="margin-top: 3rem"></div>
-			</>
-		);
-	},
-});

package/templates/blog-jsx/src/pages/index.css

@@ -1,43 +0,0 @@
-.post-card {
-	@apply my-6;
-}
-
-.post-card-link {
-	@apply flex flex-col sm:flex-row gap-4 no-underline text-inherit items-start transition-opacity duration-200;
-}
-
-.post-card-link:hover {
-	@apply opacity-80;
-}
-
-.post-card-link img {
-	@apply transition-transform duration-300;
-}
-
-.post-card-link:hover img {
-	@apply scale-105;
-}
-
-.post-card-image {
-	@apply shrink-0 w-full h-[240px] sm:w-[200px] sm:h-[140px] overflow-hidden rounded-lg shadow-sm;
-}
-
-.post-card-image img {
-	@apply w-full h-full object-cover;
-}
-
-.post-card-text {
-	@apply flex flex-col gap-2;
-}
-
-.post-card h2 {
-	@apply m-0 text-xl font-bold tracking-tight text-text transition-colors duration-200;
-}
-
-.post-card-link:hover h2 {
-	@apply text-accent-hover;
-}
-
-.post-card p {
-	@apply m-0 text-sm text-text-muted leading-relaxed;
-}

package/templates/blog-jsx/src/pages/index.kita.tsx

@@ -1,83 +0,0 @@
-import { eco } from '@ecopages/core';
-import { BaseLayout } from '@/layouts/base-layout/base-layout.kita';
-import { EcoImage } from '@ecopages/image-processor/component/html';
-import {
-	ezi76Gu53NklsuUnsplashJpg,
-	theodorePoncetQzephogqd7WUnsplashJpg,
-	urbanVintage78A265Wpio4UnsplashJpg,
-} from 'ecopages:images';
-
-const posts = [
-	{
-		slug: 'hello-world',
-		title: 'Hello World',
-		excerpt: 'Welcome to EcoPages!',
-		image: ezi76Gu53NklsuUnsplashJpg,
-	},
-	{
-		slug: 'browser-router',
-		title: 'Building a Browser Router',
-		excerpt: 'How we built SPA navigation.',
-		image: theodorePoncetQzephogqd7WUnsplashJpg,
-	},
-	{
-		slug: 'ssr-benefits',
-		title: 'SSR Benefits',
-		excerpt: 'Why server-side rendering matters.',
-		image: urbanVintage78A265Wpio4UnsplashJpg,
-	},
-];
-
-export default eco.page({
-	layout: BaseLayout,
-
-	dependencies: {
-		stylesheets: ['./index.css'],
-	},
-
-	metadata: () => ({
-		title: 'Blog | EcoPages',
-		description: 'A simple blog built with EcoPages Browser Router',
-	}),
-
-	render: () => {
-		return (
-			<>
-				<h1>Welcome</h1>
-				<p>A minimal blog exploring EcoPages with SPA navigation.</p>
-
-				{posts.map((post) => (
-					<article class="post-card">
-						<a href={`/posts/${post.slug}`} class="post-card-link">
-							<div class="post-card-image" data-view-transition={`hero-image-${post.slug}`}>
-								<EcoImage {...post.image} alt={post.title} />
-							</div>
-							<div class="post-card-content">
-								<h2>{post.title}</h2>
-								<p>{post.excerpt}</p>
-							</div>
-						</a>
-					</article>
-				))}
-				<article class="post-card">
-					<a href="/about" class="post-card-link">
-						<div class="post-card-content">
-							<h2>About This Project</h2>
-							<p>Learn about the EcoPages Browser Router.</p>
-						</div>
-					</a>
-				</article>
-				<article class="post-card">
-					<a href="/mdx-example" class="post-card-link">
-						<div class="post-card-content">
-							<h2>MDX Example</h2>
-							<p>See how MDX works with the Browser Router.</p>
-						</div>
-					</a>
-				</article>
-
-				<div style="margin-top: 3rem"></div>
-			</>
-		);
-	},
-});