@punkestu/react-html 0.0.0-stage → 0.1.0

package/example/public/styles.css

@@ -0,0 +1,184 @@
+:root {
+  --bg-color: #0f172a;
+  --card-bg: #1e293b;
+  --text-main: #f8fafc;
+  --text-muted: #94a3b8;
+  --primary: #38bdf8;
+  --primary-hover: #0ea5e9;
+  --border: #334155;
+  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  background-color: var(--bg-color);
+  color: var(--text-main);
+  font-family: var(--font);
+  line-height: 1.6;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.container {
+  max-width: 900px;
+  margin: 0 auto;
+  padding: 0 1.5rem;
+  width: 100%;
+}
+
+header {
+  border-bottom: 1px solid var(--border);
+  padding: 1.25rem 0;
+  background: rgba(15, 23, 42, 0.8);
+  backdrop-filter: blur(8px);
+}
+
+header .header-inner {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.logo {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: var(--primary);
+  text-decoration: none;
+}
+
+nav a {
+  color: var(--text-muted);
+  text-decoration: none;
+  margin-left: 1.5rem;
+  transition: color 0.2s;
+}
+
+nav a:hover, nav a.active {
+  color: var(--text-main);
+}
+
+main {
+  flex: 1;
+  padding: 3rem 0;
+}
+
+h1 {
+  font-size: 2.25rem;
+  margin-bottom: 1rem;
+}
+
+p.subtitle {
+  color: var(--text-muted);
+  font-size: 1.15rem;
+  margin-bottom: 2rem;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 1.5rem;
+  margin-bottom: 2.5rem;
+}
+
+.card {
+  background: var(--card-bg);
+  border: 1px solid var(--border);
+  border-radius: 0.75rem;
+  padding: 1.5rem;
+}
+
+.card h3 {
+  margin-bottom: 0.5rem;
+  color: var(--primary);
+}
+
+.card p {
+  color: var(--text-muted);
+  font-size: 0.95rem;
+}
+
+/* Island interactive counter styling */
+.counter-box {
+  background: var(--card-bg);
+  border: 1px solid var(--border);
+  border-radius: 0.75rem;
+  padding: 2rem;
+  text-align: center;
+  margin: 1.5rem 0;
+}
+
+.counter-value {
+  font-size: 3rem;
+  font-weight: 700;
+  color: var(--primary);
+  margin: 1rem 0;
+}
+
+.btn-group {
+  display: flex;
+  justify-content: center;
+  gap: 1rem;
+}
+
+button {
+  background: var(--primary);
+  color: #0f172a;
+  border: none;
+  border-radius: 0.5rem;
+  padding: 0.6rem 1.25rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+button:hover {
+  background: var(--primary-hover);
+}
+
+/* Tabs Island */
+.tabs-container {
+  background: var(--card-bg);
+  border: 1px solid var(--border);
+  border-radius: 0.75rem;
+  overflow: hidden;
+  margin: 1.5rem 0;
+}
+
+.tabs-header {
+  display: flex;
+  background: #0b1120;
+  border-bottom: 1px solid var(--border);
+}
+
+.tab-btn {
+  background: transparent;
+  color: var(--text-muted);
+  padding: 0.75rem 1.5rem;
+  border-radius: 0;
+  border-bottom: 2px solid transparent;
+}
+
+.tab-btn.active {
+  color: var(--primary);
+  border-bottom: 2px solid var(--primary);
+  background: rgba(56, 189, 248, 0.05);
+}
+
+.tab-content {
+  padding: 1.5rem;
+}
+
+footer {
+  border-top: 1px solid var(--border);
+  padding: 2rem 0;
+  text-align: center;
+  color: var(--text-muted);
+  font-size: 0.875rem;
+}
+

package/example/src/components/Card.tsx

@@ -0,0 +1,17 @@
+import React, { ReactNode } from 'react';
+
+export interface CardProps {
+  title: string;
+  children: ReactNode;
+  icon?: string;
+}
+
+export function Card({ title, children, icon }: CardProps) {
+  return (
+    <div className="card">
+      <h3>{icon ? `${icon} ` : ''}{title}</h3>
+      <div>{children}</div>
+    </div>
+  );
+}
+

package/example/src/components/Counter.island.tsx

@@ -0,0 +1,35 @@
+import React, { useState } from 'react';
+import { island } from '../../../src/index.js';
+
+export interface CounterProps {
+  initialCount?: number;
+  step?: number;
+}
+
+function CounterComponent({ initialCount = 0, step = 1 }: CounterProps) {
+  const [count, setCount] = useState(initialCount);
+
+  return (
+    <div className="counter-box">
+      <h3>⚡ Interactive Counter Island</h3>
+      <p style={{ color: '#94a3b8', fontSize: '0.9rem' }}>
+        This component is rendered statically on the server, then hydrated with tiny JavaScript.
+      </p>
+      <div className="counter-value">{count}</div>
+      <div className="btn-group">
+        <button type="button" onClick={() => setCount((c) => c - step)}>
+          - {step}
+        </button>
+        <button type="button" onClick={() => setCount(0)}>
+          Reset
+        </button>
+        <button type="button" onClick={() => setCount((c) => c + step)}>
+          + {step}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export const Counter = island(CounterComponent, import.meta.url, 'Counter');
+export default Counter;

package/example/src/components/Footer.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+export function Footer() {
+  const currentYear = new Date().getFullYear();
+  return (
+    <footer>
+      <div className="container">
+        <p>&copy; {currentYear} react-html. Modular pure HTML engine with selective reactive islands.</p>
+      </div>
+    </footer>
+  );
+}
+

package/example/src/components/Header.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+export interface HeaderProps {
+  currentPath?: string;
+}
+
+export function Header({ currentPath = '/' }: HeaderProps) {
+  return (
+    <header>
+      <div className="container header-inner">
+        <a href="/" className="logo">⚛️ react-html</a>
+        <nav>
+          <a href="/" className={currentPath === '/' ? 'active' : ''}>Home (Interactive)</a>
+          <a href="/pure.html" className={currentPath === '/pure' ? 'active' : ''}>Pure HTML (0 KB JS)</a>
+        </nav>
+      </div>
+    </header>
+  );
+}
+

package/example/src/components/Layout.tsx

@@ -0,0 +1,39 @@
+import React, { ReactNode } from 'react';
+import { Header } from './Header.js';
+import { Footer } from './Footer.js';
+
+export interface LayoutProps {
+  title?: string;
+  description?: string;
+  currentPath?: string;
+  children: ReactNode;
+}
+
+export function Layout({
+  title = 'react-html Demo',
+  description = 'Modular pure HTML generated with React',
+  currentPath = '/',
+  children
+}: LayoutProps) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>{title}</title>
+        <meta name="description" content={description} />
+        <link rel="stylesheet" href="/styles.css" />
+      </head>
+      <body>
+        <Header currentPath={currentPath} />
+        <main>
+          <div className="container">
+            {children}
+          </div>
+        </main>
+        <Footer />
+      </body>
+    </html>
+  );
+}
+

package/example/src/components/Tabs.island.tsx

@@ -0,0 +1,59 @@
+import React, { useState } from 'react';
+import { island } from '../../../src/index.js';
+
+export interface TabItem {
+  id: string;
+  label: string;
+  content: string;
+}
+
+export interface TabsProps {
+  tabs?: TabItem[];
+  defaultTab?: string;
+}
+
+const defaultTabs: TabItem[] = [
+  {
+    id: 'features',
+    label: '✨ Features',
+    content: 'Write modular React components with standard JSX. Reusable layouts, cards, buttons, with 0 repetitive boilerplate.'
+  },
+  {
+    id: 'islands',
+    label: '🏝️ Islands',
+    content: 'Only reactive components compile to client-side JavaScript. Everything else is rendered to pure, clean, zero-JS HTML.'
+  },
+  {
+    id: 'speed',
+    label: '⚡ Speed',
+    content: 'Ultra-fast builds powered by esbuild. Instant page loads for users because the browser only receives semantic HTML.'
+  }
+];
+
+function TabsComponent({ tabs = defaultTabs, defaultTab = 'features' }: TabsProps) {
+  const [activeTab, setActiveTab] = useState(defaultTab);
+  const currentTab = tabs.find((t) => t.id === activeTab) || tabs[0];
+
+  return (
+    <div className="tabs-container">
+      <div className="tabs-header">
+        {tabs.map((tab) => (
+          <button
+            key={tab.id}
+            type="button"
+            className={`tab-btn ${activeTab === tab.id ? 'active' : ''}`}
+            onClick={() => setActiveTab(tab.id)}
+          >
+            {tab.label}
+          </button>
+        ))}
+      </div>
+      <div className="tab-content">
+        <p>{currentTab.content}</p>
+      </div>
+    </div>
+  );
+}
+
+export const Tabs = island(TabsComponent, import.meta.url, 'Tabs');
+export default Tabs;

package/example/src/pages/index.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Layout } from '../components/Layout.js';
+import { Card } from '../components/Card.js';
+import { Counter } from '../components/Counter.island.js';
+import { Tabs } from '../components/Tabs.island.js';
+
+export const title = 'react-html Demo - Pure HTML + Reactive Islands';
+export const description = 'Modular HTML with React and selective reactive island compilation';
+
+export default function HomePage() {
+  return (
+    <Layout title={title} description={description} currentPath="/">
+      <h1>React to Pure HTML Engine</h1>
+      <p className="subtitle">
+        Write modular React components for static HTML, and compile only reactive components to minimal JavaScript.
+      </p>
+
+      <div className="grid">
+        <Card title="Modular Components" icon="📦">
+          <p>
+            Build reusable UI parts like headers, navigation, cards, and footers with React. No repetitive HTML code.
+          </p>
+        </Card>
+        <Card title="Zero-JS by Default" icon="🚀">
+          <p>
+            Static components render to 100% pure HTML. No client bundle is generated unless reactive islands are used.
+          </p>
+        </Card>
+        <Card title="Selective Reactivity" icon="🏝️">
+          <p>
+            Interactive components are isolated as islands and bundled into tiny, dedicated client scripts using esbuild.
+          </p>
+        </Card>
+      </div>
+
+      <h2 style={{ marginBottom: '1rem' }}>Interactive Island Demos</h2>
+      <p style={{ color: '#94a3b8', marginBottom: '1.5rem' }}>
+        Below are two reactive islands embedded in pure static HTML:
+      </p>
+
+      {/* Reactive Counter Island */}
+      <Counter initialCount={10} step={2} />
+
+      {/* Reactive Tabs Island */}
+      <Tabs defaultTab="islands" />
+    </Layout>
+  );
+}
+

package/example/src/pages/pure.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { Layout } from '../components/Layout.js';
+import { Card } from '../components/Card.js';
+
+export const title = '100% Pure HTML - react-html';
+export const description = 'Demonstration of zero JavaScript pure HTML output';
+
+export default function PurePage() {
+  const features = [
+    {
+      title: 'Zero Runtime JS',
+      icon: '🛡️',
+      desc: 'This entire page is compiled to semantic HTML. There are no <script> tags, no React runtime, and no client-side JavaScript sent over the wire.'
+    },
+    {
+      title: 'Modular & DRY',
+      icon: '🧩',
+      desc: 'Built using React components like <Layout />, <Header />, <Card />, and <Footer />. No copy-pasting HTML boilerplate!'
+    },
+    {
+      title: 'Fast TTFB & Paint',
+      icon: '⚡',
+      desc: 'Browsers parse pure HTML almost instantly. Perfect for documentation, blogs, landing pages, and marketing sites.'
+    }
+  ];
+
+  return (
+    <Layout title={title} description={description} currentPath="/pure">
+      <h1>Pure Static HTML</h1>
+      <p className="subtitle">
+        Compiled from React JSX with <strong>0 KB client JavaScript</strong>.
+      </p>
+
+      <div className="grid">
+        {features.map((item, idx) => (
+          <Card key={idx} title={item.title} icon={item.icon}>
+            <p>{item.desc}</p>
+          </Card>
+        ))}
+      </div>
+
+      <div className="card">
+        <h3>Inspect the Source Code</h3>
+        <p>
+          Right-click and select "View Page Source". You will notice:
+        </p>
+        <ul style={{ paddingLeft: '1.5rem', marginTop: '0.75rem', color: '#94a3b8' }}>
+          <li>Clean, indented, semantic HTML5 markup.</li>
+          <li>No <code>data-reactroot</code> or React internal comments.</li>
+          <li>Zero <code>&lt;script&gt;</code> tags.</li>
+        </ul>
+      </div>
+    </Layout>
+  );
+}
+

package/package.json

@@ -1,6 +1,47 @@
 {
   "name": "@punkestu/react-html",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "description": "Engine to convert React/JSX to pure HTML with selective reactive island compilation",
+  "type": "module",
+  "bin": {
+    "react-html": "./bin/react-html.js"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./server": {
+      "import": "./dist/server/index.js",
+      "types": "./dist/server/index.d.ts"
+    }
+  },
+  "scripts": {
+    "build": "tsc",
+    "prepublishOnly": "npm run build",
+    "test": "node --test tests/**/*.test.mjs"
+  },
+  "keywords": [
+    "react",
+    "html",
+    "ssg",
+    "static-site-generator",
+    "islands-architecture",
+    "pure-html"
+  ],
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "esbuild": "^0.25.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.13.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "typescript": "^5.7.0"
+  }
 }